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

{% block page-title %}{% trans 'Customisation of appearance' %} | {{ block.super }}{% endblock %}

{% block content %}
  <div class="appearance-screen">
    <div class="appearance-screen--options" data-options-prefix="{{ options_prefix }}">
      <form class="appearance-screen--options--filter">
        <p><input name="q" type="search" value="{{query}}" autocomplete="off" placeholder="{% trans "Filter options" %}"></p>
      </form>

      <form class="appearance-screen--options--form" method="post" action="{% url 'appearance-manager-save-options' %}">
        {% csrf_token %}
        <div class="appearance-screen--options--table-wrapper">
          <table class="main">
            <thead>
              <tr>
                <th>{% trans "Option Name" %}</th>
                <th>{% trans "Value" %}</th>
              </tr>
            </thead>
            <tbody>
              {% for option in options %}
                {% ifchanged option.section %}
                  {% if option.section %}
                    <tr><th colspan="2">{{ option.section }}</th></tr>
                  {% endif %}
                {% endifchanged %}
                <tr data-option-name="{{ option.name }}" {% if option.default_same_as %}data-default-same-as="{{ option.default_same_as }}"{% endif %}>
                  <td>
                    {{ option.label }}
                    {% if option.help_text %}
                      <br><small>{{ option.help_text }}</small>
                    {% endif %}
                  </td>
                  <td>
                    <div class="appearance--value-cell">
                      {% if option.default_same_as and option.type != "select" %}
                        <div class="appearance--value-default-or-other">
                          <select class="select-default-or-other">
                            <option value="default" {% if option.value == option.inherit_from.value %}selected{% endif %}
                            >{% trans "Default value" %}</option>
                            <option value="other" {% if option.value != option.inherit_from.value %}selected{% endif %}
                            >{% trans "Other:" %}</option>
                          </select>
                          <p class="appearance--default-text" {% if option.value != option.inherit_from.value %}hidden{% endif %}>
                            {% blocktrans with label=option.inherit_from.label %}Identical to "{{ label }}"{% endblocktrans %}
                          </p>
                        </div>
                      {% endif %}
                      <div class="appearance--value-widget appearance--value-widget-{{ option.type }}"
                           {% if option.default_same_as and option.type != "select" and option.value == option.inherit_from.value %}hidden{% endif %}
                      >
                        {% if option.type == "color" %}
                          <div class="color-selection">
                            <input type="color" name="{{ option.name }}" value="{{ option.value }}">
                            <input type="hidden" class="auto-color" name="{{ option.name }}-auto-bw-contrast">
                            {% if option.check_contrast or option.check_contrast_inv %}
                              <span class="contrast-info {% if option.check_contrast_inv %}contrast-info--inv{% endif %}">
                                <span class="contrast-info--foreground"></span>
                                <span class="contrast-info--background" data-bg="{% if option.check_contrast %}{{ option.check_contrast }}{% else %}{{ option.check_contrast_inv }}{% endif %}"></span>
                                <span class="contrast-info--value"></span>
                                <span class="contrast-info--mark"></span>
                              </span>
                            {% endif %}
                          </div>
                        {% elif option.type == "text" %}
                          <input type="text" name="{{ option.name }}" value="{{ option.value }}">
                        {% elif option.type == "length" %}
                          <input type="text" name="{{ option.name }}" value="{{ option.value }}"
                                 pattern="\d+(\.\d+)?(px|em|rem|ex|vh|vw|%)"
                                 title="{% trans "Number and unit or percent (ex: 24px, 2.5em, 30%)" %}"
                          >
                        {% elif option.type == "number" %}
                          <input type="number" name="{{ option.name }}" value="{{ option.value }}">
                        {% elif option.type == "size" %}
                          <div class="input-size">
                            <input type="text" class="input-size--height"
                                   name="{{ option.name|removesuffix:"size" }}height"
                                   value="{{ option.value.height }}"
                                   pattern="\d+(\.\d+)?(px|em|rem|ex|vh|vw|%)"
                                   title="{% trans "Number and unit or percent (ex: 24px, 2.5em, 30%)" %}"
                            >
                            ×
                            <input type="text" class="input-size--width"
                                   name="{{ option.name|removesuffix:"size" }}width"
                                   value="{{ option.value.width }}"
                                   pattern="\d+(\.\d+)?(px|em|rem|ex|vh|vw|%)"
                                   title="{% trans "Number and unit or percent (ex: 24px, 2.5em, 30%)" %}"
                            >
                          </div>
                        {% elif option.type == "select" %}
                          <select name="{{ option.name }}">
                            {% for opt in option.options %}
                              <option value="{{ opt.value }}" {% if opt.value == option.value %}selected{% endif %}>{{ opt.label }}</option>
                            {% endfor %}
                          </select>
                        {% else %}
                          {{ option.value }}
                        {% endif %}
                      </div>
                    </div>
                  </td>
                </tr>
              {% empty %}
                <tr><td colspan="2">{% trans "There are no options." %}</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% if options %}
          <div class="buttons">
            <button>{% trans "Save options" %}</button> <span id="save-status" role="status"></span>
          </div>
        {% endif %}
      </form>
    </div>

    <div class="appearance-screen--preview">
      <div class="appearance-screen--preview-width">
        <span class="buttons-group">
          <button class="active" id="switch-desktop-view">Desktop</button>
          <button id="switch-mobile-view">Mobile</button>
        </span>
      </div>
      <div class="appearance-screen--preview-content appearance-screen--preview-content-desktop">
        <iframe src="{{ iframe_url }}"></iframe>
      </div>
    </div>

  </div>
{% endblock %}