{% extends "page_view.html" %}
{% load i18n static %}
{% block styles %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'mvp_compliance/pages.css' %}" />
{% endblock styles %}
{% block page.content-wrapper %}
  <c-page.content class="py-4">
    <div class="flex flex-1 flex-col gap-6 lg:flex-row">
      <aside class="shrink-0 lg:w-1/4">
        <c-card title="{% translate "Documents" %}" class="mvp-compliance-document-list overflow-y-auto lg:sticky">
        <nav id="document-list" aria-label="{% translate "Legal documents" %}">
          <ul class="menu w-full p-0">
            {% for item in documents %}
              <li>
                <a href="{% url 'mvp_compliance:document' item.slug %}"{% if item.pk == document.pk %} class="menu-active" aria-current="page"{% endif %}>{{ item.name }}</a>
              </li>
            {% endfor %}
          </ul>
        </nav>
        </c-card>
      </aside>
      <div class="flex-1 min-w-0 flex flex-col gap-3">
        <c-page.title :title="page.title" :subtitle="page.subtitle">
          <c-slot name="actions">
            <c-dropdown halign="end" variant="primary" icon="chevron-down" reverse text="v{{ version.number }}">
              <ul class="menu menu-sm w-full">
                {% for item in versions %}
                  <li>
                    <a href="{% url 'mvp_compliance:document' document.slug %}?version={{ item.number }}"{% if item.number == version.number %} class="menu-active" aria-current="page"{% endif %}>{% blocktranslate with number=item.number date=item.published_at|date %}v{{ number }} - {{ date }}{% endblocktranslate %}</a>
                  </li>
                {% endfor %}
              </ul>
            </c-dropdown>
          </c-slot>
        </c-page.title>
        {% if version.replaced_at %}
          <c-alert variant="warning" class="alert-horizontal">
            <span>{% blocktranslate with published=version.published_at|date replaced=version.replaced_at|date %}This version has been replaced. It was in force from {{ published }} to {{ replaced }}.{% endblocktranslate %}</span>
            <a class="btn btn-sm" href="{% url 'mvp_compliance:document' document.slug %}">{% translate "View current version" %}</a>
          </c-alert>
        {% endif %}
        <div class="prose max-w-none">{{ version.html|safe }}</div>
      </div>
    </div>
  </c-page.content>
{% endblock page.content-wrapper %}