{% extends "conjunto/app_base.html" %}
{% load i18n %}

{% block page_title %}{% blocktranslate with title=page.title %}Edit page: {{ title }}{% endblocktranslate %}{% endblock %}

{% block page_actions %}
  <a href="{% url 'cms:block_picker' slug=page.slug %}?language={{ page.language }}"
     hx-get="{% url 'cms:block_picker' slug=page.slug %}?language={{ page.language }}"
     hx-target="#dialog" hx-swap="innerHTML"
     class="btn btn-primary">
    <i class="ti ti-plus" aria-hidden="true"></i> {% translate "Add block" %}
  </a>
{% endblock %}

{% block content %}
  {% comment %}
    One tab per project language. A slug is the page's identity; each
    language is a separate row with its own blocks, so switching tabs
    switches the whole block list. A language without a row is shown
    disabled rather than hidden — a missing translation is information
    the editor needs, and pages are created in the admin.
  {% endcomment %}
  {% if language_tabs|length > 1 %}
    <ul class="nav nav-tabs mb-3" role="tablist">
      {% for tab in language_tabs %}
        <li class="nav-item" role="presentation">
          {% if tab.exists %}
            <a class="nav-link{% if tab.is_current %} active{% endif %}"
               href="{% url 'cms:page_editor' slug=page.slug %}?language={{ tab.code }}"
               {% if tab.is_current %}aria-current="page"{% endif %}>
              {{ tab.label }}
            </a>
          {% else %}
            <span class="nav-link disabled" aria-disabled="true"
                  title="{% translate 'This translation does not exist yet.' %}">
              {{ tab.label }} <i class="ti ti-alert-circle" aria-hidden="true"></i>
            </span>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}

  {% include "conjunto/cms/editor/_block_list.html" %}
{% endblock %}