{% extends "combo/layouts/manager_home.html" %}
{% load gadjo i18n static %}

{% block extrascripts %}
  {{ block.super }}
  <link href="/static/css/combo.layouts.manager.css" media="all" rel="stylesheet">
  <script src="{% static "js/combo.layout.js" %}?{% start_timestamp %}"></script>
{% endblock %}

{% block manager-layout-page-title %}{% trans 'Cell layout' %} - {{ object.title }}{% endblock %}

{% block appbar %}
  <h2>{{ object.title }}</h2>
  <span class="actions">
    <a data-popup href="{% url 'manager-layouts-delete' slug=object.slug %}">{% trans "Delete" %}</a>
    <a data-popup href="{% url 'manager-layouts-rename' slug=object.slug %}">{% trans "Rename" %}</a>
  </span>
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  <a href="{% url 'manager-layouts-view' slug=object.slug %}">{{ object.title }}</a>
{% endblock %}

{% block content %}

  <div class="bo-block">
    <p>{{ object.data_source.provider.title }} / {{ object.data_source.label }}</p>
  </div>

  <div id="toolbar">
    <button id="toolbar-add" {% if object.layout.children.0 %}disabled{% endif %}
            title="{% trans "Add block" %}"
            data-base-url="{% url 'manager-layouts-add-block' slug=object.slug %}"><span class="sr-only">{% trans "Add block" %}</span></button>

    <div class="gadjo-joined-buttons">
      <button id="toolbar-move-before" disabled
              title="{% trans "Move before" %}"
              data-base-url="{% url 'manager-layouts-move-block-before' slug=object.slug %}">
        <span class="sr-only">{% trans "Move before" %}</span></button>
      <button id="toolbar-move-after" disabled
              title="{% trans "Move after" %}"
              data-base-url="{% url 'manager-layouts-move-block-after' slug=object.slug %}">
        <span class="sr-only">{% trans "Move after" %}</span></button>
    </div>

    <div class="gadjo-joined-buttons">
      <button id="toolbar-cut" disabled
              title="{% trans "Cut" %}"
              data-base-url="{% url 'manager-layouts-cut-block' slug=object.slug %}">
        <span class="sr-only">{% trans "Cut block" %}</span></button>
      <button id="toolbar-copy" disabled
              title="{% trans "Copy" %}"
              data-base-url="{% url 'manager-layouts-copy-block' slug=object.slug %}">
        <span class="sr-only">{% trans "Copy block" %}</span></button>
      <button id="toolbar-paste" disabled
              title="{% trans "Paste" %}"
              data-base-url="{% url 'manager-layouts-paste-block' slug=object.slug %}">
        <span class="sr-only">{% trans "Paste block" %}</span></button>
    </div>

    <button id="toolbar-options" disabled
            title="{% trans "Options" %}"
            data-base-url="{% url 'manager-layouts-block-options' slug=object.slug %}">
      <span class="sr-only">{% trans "Options" %}</span></button>

    <button id="toolbar-delete" disabled
            title="{% trans "Delete" %}"
            data-base-url="{% url 'manager-layouts-delete-block' slug=object.slug %}">
      <span class="sr-only">{% trans "Delete" %}</span></button>

    {% if object.layout.get_options_form_class %}
      <span class="expander"></span>
      <a class="button" data-popup href="{% url 'manager-layouts-block-options' slug=object.slug %}?active-block-uuid=root">{% trans "General options" %}</a>
    {% endif %}
  </div>

  {% include "combo/layouts/manager_layout_view_layout_fragment.html" %}

  <div class="bo-block">
    {% if pages %}
      <p>{% blocktrans trimmed count counter=pages|length %}
        This layout is in use on the following page:
      {% plural %}
        This layout is in use on the following pages:
      {% endblocktrans %}
        <ul class="objects-list single-links">
          {% for page in pages %}
            <li><a href="{% url 'combo-manager-page-view' pk=page.id %}">{{ page.title }}</a></li>
          {% endfor %}
        </ul>
    {% else %}
      <p>{% trans "This layout is not yet used." %}</p>
    {% endif %}
  </div>
{% endblock %}