{% extends "combo/manager_base.html" %}
{% load i18n %}
{% load cells %}
{% load thumbnail %}

{% block page-title %}{% trans 'Page' %} - {{ object.title }} | {{ block.super }}{% endblock %}

{% block appbar %}
  {% with object.get_sub_slug_details as sub_slug_details %}
    <h2>{% trans 'Page' %} - {{ object.title }}{% if with_wcs and sub_slug_details.1 %} <span class="extra-info">({% blocktrans with card_model=sub_slug_details.1 %}page linked to card model "{{ card_model }}"{% endblocktrans %})</span>{% endif %}</h2>
  {% endwith %}
  <span class="actions">
    {% if not is_readonly %}
      <a class="extra-actions-menu-opener"></a>
      <a class="action-see-online" href="{{ object.get_online_url_no_redirect }}">{% trans 'See online' %}</a>
      <ul class="extra-actions-menu">
        <li><a class="action-edit-page-variables" rel="popup" href="{% url 'combo-manager-page-edit-extra-variables' pk=object.id %}">{% trans "Edit extra page variables" %}</a></li>
        {% if with_wcs %}
          <li><a class="action-edit-page-linked-card" rel="popup" href="{% url 'combo-manager-page-edit-linked-card' pk=object.id %}">{% trans "Link a card model" %}</a></li>
        {% endif %}
        {% if perms.data.add_page %}
          <li><a class="action-edit-roles" rel="popup" href="{% url 'combo-manager-page-edit-roles' pk=object.id %}">{% trans 'Manage edit roles' %}</a></li>
          <li class="menu-item--separator"></li>
          <li><a class="action-add-child" rel="popup" href="{% url 'combo-manager-page-add-child' pk=object.id %}">{% trans 'Add a child page' %}</a></li>
          <li><a rel="popup" class="action-duplicate" href="{% url 'combo-manager-page-duplicate' pk=object.id %}">{% trans 'Duplicate' %}</a></li>
        {% endif %}
        <li class="menu-item--separator"></li>
        <li><a class="action-inspect" href="{% url 'combo-manager-page-inspect' pk=object.id %}">{% trans 'Inspect' %}</a></li>
        <li><a class="action-history" href="{% url 'combo-manager-page-history' pk=object.id %}">{% trans 'History' %}</a></li>
        {% if perms.data.add_page %}
          <li><a rel="popup" class="action-save" href="{% url 'combo-manager-page-save' pk=object.id %}">{% trans 'Save snapshot' %}</a></li>
        {% endif %}
        <li class="menu-item--separator"></li>
        <li><a {% if page_has_subpages %}rel="popup" data-autoclose-dialog="true" {% endif %}class="action-export" href="{% url 'combo-manager-page-export' pk=object.id %}">{% trans 'Export' %}</a></li>
        {% if perms.data.add_page %}
          <li class="menu-item--separator"></li>
          <li><a class="action-delete" rel="popup" href="{% url 'combo-manager-page-delete' pk=object.id %}">{% trans 'Delete' %}</a></li>
        {% endif %}
      </ul>
    {% else %}
      <a class="action-see-online" href="{% url 'combo-snapshot-view' pk=snapshot.pk %}">{% trans 'See online' %}</a>
    {% endif %}
  </span>
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  {% if not is_readonly %}
    <li class="ariane--list-item">
      <a class="ariane--link" aria-current="page" href="{% url 'combo-manager-page-view' pk=object.id %}">{% trans 'Page' %} - {{object.title }}</a>
    </li>
  {% else %}
    <li class="ariane--list-item">
      <a class="ariane--link" href="{% url 'combo-manager-page-view' pk=snapshot.page_id %}">{% trans 'Page' %} - {{object.title }}</a>
    </li>
    <li class="ariane--list-item">
      <a class="ariane--link" href="{% url 'combo-manager-page-history' pk=snapshot.page_id %}">{% trans 'History' %}</a>
    </li>
    <li class="ariane--list-item">
      <a class="ariane--link" aria-current="page" href="{% url 'combo-manager-snapshot-view' page_pk=snapshot.page_id pk=snapshot.pk %}">{{ snapshot.timestamp }}</a>
    </li>
  {% endif %}
{% endblock %}

{% block sidebar %}
  <aside id="sidebar">

    {% block sidebar-top %}{% endblock %}

    {% if not is_readonly %}
      <div class="page-options">
        <h3>{% trans 'Parameters' %}</h3>

        <p>
          <label>{% trans 'Title:' %}</label>
          {{object.title}}
          (<a rel="popup" href="{% url 'combo-manager-page-edit-title' pk=object.id %}">{% trans 'change' %}</a>)
        </p>

        {% with object.get_sub_slug_details as sub_slug_details %}
          <p>
            <label>{% trans 'Slug:' %}</label>
            <tt>{{ object.slug }}{% if sub_slug_details and not sub_slug_details.1 %}/<span class="subslug">{{ sub_slug_details.0 }}</span>{% endif %}</tt>
            (<a rel="popup" href="{% url 'combo-manager-page-edit-slug' pk=object.id %}">{% trans 'change' %}</a>)
          </p>
        {% endwith %}

        <p>
          <label>{% trans 'Description:' %}</label>
          {% if object.description %}{{ object.description|truncatewords:32 }}{% else %}<i>{% trans 'none' %}</i>{% endif %}
          (<a rel="popup" href="{% url 'combo-manager-page-edit-description' pk=object.id %}">{% trans 'change' %}</a>)
        </p>

        <p>
          <label>{% trans 'Template:' %}</label>
          {{ object.get_template_display_name }}
          {% if object.missing_template %}<span class="error">({% trans "missing" %})</span>{% endif %}
          (<a rel="popup" href="{% url 'combo-manager-page-select-template' pk=object.id %}">{% trans 'change' %}</a>)
        </p>

        {% for key, option in page.get_extra_page_options.items %}
          <p>
            <label>{{ option.label }}{% trans ":" %}</label>
            {% with page.extra_variables|get:key as option_value %}
              {% if option_value %}{{ option_value }}{% else %}<i>{% trans '(unset)' %}</i>{% endif %}
            {% endwith %}
            (<a rel="popup" href="{% url 'combo-manager-page-edit-extra-option' pk=object.id option_key=key %}">{% trans 'change' %}</a>)
          </p>
        {% endfor %}

        <p>
          <label>{% trans 'Visibility:' %}</label>
          {{ object.visibility }}
          (<a rel="popup" href="{% url 'combo-manager-page-visibility' pk=object.id %}">{% trans 'change' %}</a>)
        </p>

        <p>
          <label>{% trans 'Include in navigation menus:' %}</label>
          {% if object.exclude_from_navigation %}{% trans 'no' %}{% else %}{% trans 'yes' %}{% endif %}
          (<a rel="popup" href="{% url 'combo-manager-page-edit-include-in-navigation' pk=object.id %}">{% trans 'change' %}</a>)
        </p>

        <p>
          <label>{% trans 'Redirection:' %}</label>
          {% if object.redirect_url %}{{ object.redirect_url }}{% else %}<i>{% trans 'none' %}</i>{% endif %}
          (<a rel="popup" href="{% url 'combo-manager-page-edit-redirection' pk=object.id %}">{% trans 'change' %}</a>)
        </p>

        <p>
          <label>{% trans 'Picture:' %}</label>
          {% if object.picture %}
            {% if object.picture_extension != '.svg' %}
              {% thumbnail object.picture "320x240" crop="50% 25%" upscale=False as im %}
                <img class="page-picture" src="{{im.url}}"/>
              {% endthumbnail %}
            {% else %}
              <img class="page-picture" src="{{page.picture.url}}"/>
            {% endif %}
            (<a href="{% url 'combo-manager-page-remove-picture' pk=object.id %}">{% trans 'remove' %}</a>)
          {% else %}<i>{% trans 'none' %}</i>{% endif %}
          (<a rel="popup" href="{% url 'combo-manager-page-edit-picture' pk=object.id %}">{% trans 'change' %}</a>)
        </p>

        {% if object.get_extra_variables_keys %}
          <p>
            <label>{% trans 'Extra variables:' %}</label>
            {% for key in object.get_extra_variables_keys %}<i>{{ key }}</i>{% if not forloop.last %}, {% endif %}{% endfor %}
            (<a rel="popup" href="{% url 'combo-manager-page-edit-extra-variables' pk=object.id %}">{% trans 'change' %}</a>)
          </p>
        {% endif %}

      </div>

      {% if object.parent_id or previous_page or next_page %}
        <div class="page-options navigation">
          <h3>{% trans 'Navigation' %}</h3>
          <ul>
            {% if object.parent_id and request.user.is_superuser %}
              <li class="nav-up"><a href="{% url 'combo-manager-page-view' pk=object.parent_id %}">{{ object.parent.title }}</a></li>
            {% endif %}
            {% if previous_page %}
              <li class="nav-left"><a href="{% url 'combo-manager-page-view' pk=previous_page.pk %}">{{ previous_page.title }}</a></li>
            {% endif %}
            {% if next_page %}
              <li class="nav-right"><a href="{% url 'combo-manager-page-view' pk=next_page.pk %}">{{ next_page.title }}</a></li>
            {% endif %}
          </ul>
        </div>
      {% endif %}

      {% if optional_placeholders %}
        <div class="page-options">
          <h3>{% trans 'Optional sections' %}</h3>
          <ul>
            {% for placeholder in optional_placeholders %}
              <li>
                {{ placeholder.name }} ({% if placeholder.is_empty %}{% trans "empty" %}{% else %}{% trans "like parent" %}{% endif %})
                (<a href="{% url 'combo-manager-page-view' pk=object.id %}?include-section={{ placeholder.key }}">{% trans 'change' %}</a>)
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}

      {% if object.applications %}
        <h3>{% trans "Applications" %}</h3>
        {% for application in object.applications %}
          <a class="button button-paragraph" href="{% url 'combo-manager-homepage' %}?application={{ application.slug }}">
            {% thumbnail application.icon '16x16' format='PNG' as im %}
              <img src="{{ im.url }}" alt="" class="application-icon" width="16" />
            {% endthumbnail %}
            {{ application.name }}
          </a>
        {% endfor %}
      {% endif %}

    {% else %}

      <div class="infonotice">
        <p class="pk-notice--title">{% trans "Information" %}</p>
        <p>{% trans "This page is readonly." %}</p>
      </div>
      <p>
        {% if snapshot.label %}
          <strong>{{ snapshot.label }}</strong>
        {% elif snapshot.comment %}
          {{ snapshot.comment }}
        {% endif %}
        <br />
        {{ snapshot.timestamp|date:"d/m/Y H:i" }} {% if snapshot.user %}({{ snapshot.user }}){% endif %}
      </p>
      {% if snapshot.previous or snapshot.next %}
        <p class="snapshots-navigation">
          {% if snapshot.pk != snapshot.first %}
            <a class="button" href="{% url 'combo-manager-snapshot-view' page_pk=snapshot.page_id pk=snapshot.first %}">&Lt;</a>
            <a class="button" href="{% url 'combo-manager-snapshot-view' page_pk=snapshot.page_id pk=snapshot.previous %}">&LT;</a>
          {% else %}
            <a class="button disabled" href="#">&Lt;</a>
            <a class="button disabled" href="#">&LT;</a>
          {% endif %}
          {% if snapshot.pk != snapshot.last %}
            <a class="button" href="{% url 'combo-manager-snapshot-view' page_pk=snapshot.page_id pk=snapshot.next %}">&GT;</a>
            <a class="button" href="{% url 'combo-manager-snapshot-view' page_pk=snapshot.page_id pk=snapshot.last %}">&Gt;</a>
          {% else %}
            <a class="button disabled" href="#">&GT;</a>
            <a class="button disabled" href="#">&Gt;</a>
          {% endif %}
        </p>
      {% endif %}
      <div>
        <a class="button button-paragraph" href="{% url 'combo-manager-snapshot-restore' page_pk=snapshot.page_id pk=snapshot.pk %}" rel="popup">{% trans "Restore version" %}</a>
        <a class="button button-paragraph" href="{% url 'combo-manager-snapshot-export' page_pk=snapshot.page_id pk=snapshot.pk %}">{% trans "Export version" %}</a>
        <a class="button button-paragraph" href="{% url 'combo-manager-snapshot-inspect' page_pk=snapshot.page_id pk=snapshot.pk %}">{% trans "Inspect version" %}</a>
      </div>

    {% endif %}

    {% block sidebar-bottom %}{% endblock %}

  </aside>
{% endblock %} {# sidebar #}

{% block content %}

  <div id="page-content">

    {% if object.redirect_url %}
      <div class="infonotice">
        <p class="pk-notice--title">{% trans "Information" %}</p>
        <p>
          {% blocktrans with redirect_url=object.redirect_url %}This page is configured as a redirection to the URL "{{ redirect_url }}".{% endblocktrans %}
          {% if redirect_url_is_absolute %}
            {% trans "It will also be used as a template for the pages behind this URL." %}
          {% endif %}
        </p>
      </div>
    {% endif %}

    <div id="placeholders"
         data-cell-order-url="{% url 'combo-manager-cell-order' page_pk=object.id %}"
    >
      {% for placeholder in placeholders %}
        <div class="placeholder" data-placeholder-key="{{ placeholder.key }}">
          <h2>{{ placeholder.name }}</h2>
          {% if not is_readonly %}
            <a class="placeholder-options-link" data-popup href="{% url 'combo-manage-placeholder-options' page_pk=object.id placeholder=placeholder.key %}">{% trans "Options" %}</a>
          {% endif %}
          <div class="cell-list">
            {% for cell in placeholder.cells %}
              <div id="cell-{{cell.get_reference}}" class="cell {{cell.css_class_name}} foldable folded" data-cell-reference="{{ cell.get_reference }}">
                <h3 class="cell--title">
                  <span class="handle">⣿</span>
                  <span class="group1">
                    {{ cell.get_label }}
                    <span class="cell-template-label"
                    >{% if cell.template_name %}({{cell.get_template_label}}){% endif %}</span>
                    <span class="cell-slug">{% if cell.slug %}[{{cell.slug}}]{% endif %}</span>
                    <span class="extra-css-class">{% if cell.cleaned_extra_css_class %}[{{ cell.cleaned_extra_css_class }}]{% endif %}</span>
                    <span class="additional-label"><i>{{cell.get_additional_label|default_if_none:""}}</i></span>
                    {% if cell.get_invalid_reason %}
                      <span class="invalid">{{ cell.get_invalid_reason }}{% if cell.css_class_name != 'link-list-cell' %} -
                        {% if cell.get_validity_info.invalid_datetime|datetime_in_past %}
                          {% blocktrans with cell.get_validity_info.invalid_datetime|date:"DATETIME_FORMAT" as invalidity_date %}This cell is no longer displayed since {{ invalidity_date }}.{% endblocktrans %}
                        {% else %}
                          {% blocktrans with cell.get_validity_info.invalid_datetime|timeuntil as invalidity_delay %}This cell will no longer be displayed in {{ invalidity_delay }}.{% endblocktrans %}
                        {% endif %}
                      {% endif %}</span>
                    {% endif %}
                  </span>
                  <span class="visibility-summary {{ cell.get_manager_visibility_css_class }}"
                        title="{% trans 'Restricted visibility' %}"
                  >{{ cell.get_manager_visibility_content }}</span>
                </h3>
                <div class="cell--body" id="cell-{{cell.get_reference}}-body">{% cell_form cell %}</div>
              </div>
            {% endfor %}
          </div>

          {% if not is_readonly %}
            <div class="manager-add-new-cell">
              <a href="#">{% trans 'Add a new cell' %}</a>
              <div style="display: none">
                <select>
                  {% for label, celltypes in cell_type_groups %}
                    {% if label %}
                      <optgroup label="{{label}}">
                    {% endif %}
                    {% for cell_type in celltypes %}
                      <option data-add-url="{% url 'combo-manager-page-add-cell' page_pk=object.id cell_type=cell_type.cell_type_str variant=cell_type.variant ph_key=placeholder.key %}"
                      >{{cell_type.name}}</option>
                    {% endfor %}
                    {% if label %}
                      </optgroup>
                    {% endif %}
                  {% endfor %}
                </select>
                <button>ok</button>
              </div>
            </div>
          {% endif %}

        </div>
      {% endfor %}
    </div>

  </div>

{% endblock %}