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

{% block page-title %}{% trans 'Content styles' %} | {{ block.super }}{% endblock %}

{% block appbar %}
  <h2>{% trans 'Content styles' %}</h2>
  <span class="actions">
    {% if content_cell_enabled %}
      <a href="{% url 'manager-layouts-index' %}">{% trans 'Cell layouts' %}</a>
    {% endif %}
    <a data-popup href="{% url 'appearance-manager-add-style' %}">{% trans 'New style' %}</a>
  </span>
{% endblock %}

{% block breadcrumb %}
  {{ block.super }}
  <a href="{% url 'appearance-manager-styles' %}">{% trans 'Content styles' %}</a>
{% endblock %}

{% block content %}

  {% if not content_styles %}
    <div class="big-msg-info">
      {% blocktrans trimmed %}
        This site doesn't have any custom content style yet. Click on the "New style"
        button in the top right of the page to add a first one.
      {% endblocktrans %}
    </div>
  {% else %}
    <ul class="objects-list single-links" id="content-styles-list">
      {% for style in content_styles %}
        <li>
          <a class="style-name" data-popup href="{% url 'appearance-manager-edit-style' slug=style.slug %}">{{ style.name }}</a>
          <span class="rendering-preview" style="
                                                 {% if style.colours.text_color %}--text-color: {{style.colours.text_color}};{% endif %}
                                                 {% if style.colours.background_color %}--background-color: {{style.colours.background_color}};{% endif %}
                                                "
          >{% trans "rendering preview" %}</span>
          <a data-popup title="{% trans "Delete" %}" class="link-action-icon delete" href="{% url 'appearance-manager-delete-style' slug=style.slug %}">{% trans "Delete" %}</a>
        </li>
      {% endfor %}
    </ul>
  {% endif %}

{% endblock %}