{% extends "page_view.html" %}
{% load i18n %}
{% block page.side %}
  <c-mvp.page.side label="{% translate "Documents" %}" id="documents" position="start" breakpoint="lg">
    <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-mvp.page.side>
{% endblock page.side %}
{% block page.actions %}
  <c-mvp.dropdown halign="end">
    <c-slot name="button">
      <c-button tabindex="0" role="button" variant="primary" text="v{{ version.number }}">
        <c-icon name="chevron-down" />
      </c-button>
    </c-slot>
    <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-mvp.dropdown>
  <c-mvp.page.side.toggle for="documents" text="{% translate "Documents" %}" />
{% endblock page.actions %}
{% block page.content %}
  {% if version.replaced_at %}
    <c-alert variant="warning" icon="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>
{% endblock page.content %}