{% extends 'generic/object.html' %}
{% load helpers %}
{% block head %}
  {{ block.super }}
  <style>
    .documentation-content { overflow-x: auto; }
    .documentation-content table {
      width: max-content !important;
      min-width: 100%;
      max-width: none !important;
      table-layout: auto;
      border-collapse: collapse !important;
      border: 1px solid var(--tblr-border-color, #adb5bd) !important;
      font-size: .875rem;
      line-height: 1.25;
    }
    .documentation-content th,
    .documentation-content td {
      min-width: 8rem;
      max-width: 24rem;
      padding: .4rem .55rem !important;
      border: 1px solid var(--tblr-border-color, #adb5bd) !important;
      overflow-wrap: anywhere;
      word-break: normal;
      vertical-align: top;
    }
    .documentation-content th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--tblr-bg-surface-secondary, #f1f3f5) !important;
      font-weight: 700;
    }
    .documentation-content tbody tr:nth-child(even) td {
      background: color-mix(in srgb, var(--tblr-bg-surface-secondary, #f1f3f5) 45%, transparent);
    }
    .documentation-content p { max-width: 90rem; }
    #documentation-viewer:fullscreen {
      width: 100%;
      max-width: none;
      height: 100%;
      padding: 1.25rem;
      overflow: auto;
      background: var(--tblr-body-bg, #fff);
    }
    #documentation-viewer:fullscreen .card { min-height: calc(100vh - 2.5rem); }
    #documentation-viewer:fullscreen .fullscreen-document-title,
    #documentation-viewer:fullscreen .fullscreen-exit { display: block !important; }
    .fullscreen-document-title { display: none; margin: 0 4rem 1rem 0; }
    .fullscreen-exit { display: none; position: fixed; top: 1rem; right: 1rem; z-index: 10; }
  </style>
{% endblock head %}
{% block extra_controls %}
  <button type="button" id="documentation-fullscreen" class="btn btn-outline-secondary">
    <i class="mdi mdi-fullscreen"></i> Vollbild
  </button>
  <a href="{% url 'plugins:netbox_documentation:document_print' pk=object.pk %}" target="_blank" class="btn btn-outline-secondary">
    <i class="mdi mdi-printer"></i> Drucken / PDF
  </a>
{% endblock extra_controls %}
{% block content %}
<div class="row">
  <div class="col col-md-9" id="documentation-viewer">
    <h1 class="fullscreen-document-title">{{ object.title }}</h1>
    <button type="button" class="btn btn-secondary fullscreen-exit" id="documentation-fullscreen-exit"><i class="mdi mdi-fullscreen-exit"></i> Vollbild beenden</button>
    {% if object.summary %}<p class="lead">{{ object.summary }}</p>{% endif %}
    <div class="card"><div class="card-body rendered-markdown documentation-content">{{ object.rendered_body|safe }}</div></div>
  </div>
  <div class="col col-md-3">
    {% if object.category %}<div class="card mb-3"><h5 class="card-header">Ordner</h5><a class="list-group-item list-group-item-action" href="{{ object.category.get_absolute_url }}"><i class="mdi mdi-folder"></i> {{ object.category }}</a></div>{% endif %}
    <div class="card"><h5 class="card-header">Zuordnungen</h5><div class="list-group list-group-flush">
      {% for assignment in object.assignments.all %}<a class="list-group-item" href="{{ assignment.assigned_object.get_absolute_url }}">{{ assignment.assigned_object_type }}: {{ assignment.assigned_object }}</a>{% empty %}<div class="list-group-item text-muted">Noch nicht zugeordnet</div>{% endfor %}
    </div></div>
    {% if object.attachments.all %}<div class="card mt-3"><h5 class="card-header">Originaldateien</h5><div class="list-group list-group-flush">
      {% for attachment in object.attachments.all %}<a class="list-group-item" href="{{ attachment.file.url }}">{{ attachment.original_name }}</a>{% endfor %}
    </div></div>{% endif %}
  </div>
</div>
{% endblock content %}

{% block javascript %}
  {{ block.super }}
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const viewer = document.getElementById('documentation-viewer');
      const openButton = document.getElementById('documentation-fullscreen');
      const closeButton = document.getElementById('documentation-fullscreen-exit');
      if (!viewer || !openButton || !viewer.requestFullscreen) {
        if (openButton) openButton.style.display = 'none';
        return;
      }
      openButton.addEventListener('click', () => viewer.requestFullscreen());
      closeButton.addEventListener('click', () => {
        if (document.fullscreenElement) document.exitFullscreen();
      });
    });
  </script>
{% endblock javascript %}