{% extends "hobo/base.html" %}
{% load i18n %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" href="{% url 'theme-home' %}">{% trans 'Theme' %}</a>
  </li>
{% endblock %}

{% block appbar %}
  <h2>{% trans 'Theme' %}</h2>
  <span class="actions">
    <a rel="popup" href="{% url 'theme-options' %}">{% trans 'Options' %}</a>
  </span>
{% endblock %}

{% block content %}
  {% if selected_theme %}
    <p>{% trans "Current theme:" %} {{ selected_theme.label }}</p>
  {% endif %}

  <div id="theme-filter">
    {% trans "Filter:" %} <input type="search" name="q" data-searchable-sections-selector="#themes-list" id="theme-filter-input" autocomplete="off">
  </div>
  <form action="{% url 'theme-select' %}" method="post">
    {% csrf_token %}
    <div class="objects-list" id="themes-list">
      {% for theme in themes %}
        <div data-id="{{theme.id}}" data-search-text="{{ theme.id }} {{ theme.label|slugify }}">
          <label style="border-color: {{theme.variables.theme_color}}"><input type="radio" name="theme" value="{{theme.id}}" {% if theme.id == selected_theme.id %}checked="checked"{% endif %}/>{{theme.label}}</label>
        </div>
      {% endfor %}
    </div>
    <div class="buttons">
      <button>{% trans "Submit" %}</button>
    </div>
  </form>

{% endblock %}