{% extends 'generic/object.html' %}
{% load helpers %}
{% block head %}
  {{ block.super }}
  <style>
    .documentation-content {
      overflow-x: auto;
      font-family: Arial, sans-serif;
      font-size: 11pt;
    }
    .documentation-content table {
      width: auto;
      max-width: none;
      table-layout: auto;
      border-collapse: collapse;
    }
    .documentation-content th,
    .documentation-content td {
      padding: .45rem;
      border: 1px solid #adb5bd;
      word-break: normal;
      vertical-align: top;
    }
    .documentation-content th {
      font-weight: 700;
    }
    .documentation-content table.doc-table-full-width { width: 100% !important; }
    .documentation-content table.doc-table-compact th,
    .documentation-content table.doc-table-compact td { min-width: 5rem; padding: .2rem .35rem !important; font-size: .8rem; }
    .documentation-content table.doc-table-striped tbody tr:nth-child(even) td { background: var(--tblr-bg-surface-secondary, #f1f3f5); }
    .documentation-content table.doc-table-header-blue thead th { background: #206bc4 !important; color: #fff; }
    .documentation-content table.doc-table-header-green thead th { background: #2b8a3e !important; color: #fff; }
    .documentation-content table.doc-table-header-dark thead th { background: #343a40 !important; color: #fff; }
    .documentation-content table.doc-table-borderless,
    .documentation-content table.doc-table-borderless th,
    .documentation-content table.doc-table-borderless td { border: 0 !important; }
    .documentation-content .doc-cell-yellow { background: #fff3bf !important; color: #212529; }
    .documentation-content .doc-cell-green { background: #d3f9d8 !important; color: #212529; }
    .documentation-content .doc-cell-red { background: #ffe3e3 !important; color: #212529; }
    .documentation-content .doc-cell-blue { background: #dbeafe !important; color: #212529; }
    .documentation-content .doc-cell-middle { vertical-align: middle !important; }
    .documentation-content p { max-width: 90rem; }
    .documentation-content table { cursor: zoom-in; }
    #documentation-viewer.documentation-page-focus {
      position: fixed;
      inset: 0;
      z-index: 1055;
      width: 100vw;
      max-width: none;
      height: 100vh;
      padding: 1.5rem;
      overflow: auto;
      background: var(--tblr-body-bg, #fff);
    }
    #documentation-viewer.documentation-page-focus .card { min-height: calc(100vh - 5rem); }
    #documentation-viewer.documentation-page-focus .fullscreen-document-title,
    #documentation-viewer.documentation-page-focus .fullscreen-exit { display: block !important; }
    #documentation-viewer.documentation-page-focus .documentation-content table { cursor: default; }
    body.documentation-page-focus-open { overflow: hidden; }
    .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-arrow-expand-all"></i> Großansicht
  </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-arrow-collapse-all"></i> Großansicht 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 || !closeButton) return;
      const openViewer = () => {
        viewer.classList.add('documentation-page-focus');
        document.body.classList.add('documentation-page-focus-open');
        viewer.scrollTop = 0;
      };
      const closeViewer = () => {
        viewer.classList.remove('documentation-page-focus');
        document.body.classList.remove('documentation-page-focus-open');
      };
      openButton.addEventListener('click', openViewer);
      closeButton.addEventListener('click', closeViewer);
      viewer.querySelectorAll('.documentation-content table').forEach(table => {
        table.title = 'Tabelle in Großansicht öffnen';
        table.addEventListener('click', event => {
          if (viewer.classList.contains('documentation-page-focus')) return;
          if (event.target.closest('a, button, input, select, textarea')) return;
          openViewer();
        });
      });
      document.addEventListener('keydown', event => {
        if (event.key === 'Escape' && viewer.classList.contains('documentation-page-focus')) closeViewer();
      });
    });
  </script>
{% endblock javascript %}