<div class="grav-update themes"></div>

<h1>
    {{ installing ? "PLUGIN_ADMIN.AVAILABLE_THEMES"|tu : "PLUGIN_ADMIN.INSTALLED_THEMES"|tu }}
</h1>

<div class="themes card-row grid fixed-blocks pure-g">
    {% for slug, theme in admin.themes(not installing).toArray|ksort %}
        {% set state = 'inactive' %}
        {% if (installing) %}{% set state = 'installing' %}{% endif %}
        {% if (config.get('system.pages.theme') == slug) %}{% set state = 'active' %}{% endif %}

        <div class="theme card-item pure-u-1-3 {{ state }}-theme" data-gpm-theme="{{ slug|url_encode }}">
            <div class="gpm-name">
                <i class="fa fa-fw fa-{{ theme.icon }}"></i>
                <a href="{{ base_url_relative }}/themes/{{ slug|url_encode }}">{{ theme.name }}</a>
                {% if admin.isTeamGrav(theme) %}
                    <small><span class="info-reverse"><i class="fa fa-check-circle" title="{{ "PLUGIN_ADMIN.GRAV_OFFICIAL_THEME"|tu }}"></i></span></small>
                {% endif %}
                {% if theme.symlink %}
                    <span class="hint--bottom"  data-hint="{{ "PLUGIN_ADMIN.THEME_SYMBOLICALLY_LINKED"|tu }}">
                    <i class="fa fa-fw fa-link"></i>
                </span>
                {% endif %}
                <span class="gpm-version">v{{ theme.version }}</span>
            </div>
            <div class="gpm-screenshot">
                {% set thumb = installing ? 'http://getgrav.org/images/' ~ theme.screenshot : theme.thumbnail %}
                <a href="{{ base_url_relative }}/themes/{{ slug|url_encode }}"><img src="{{ thumb }}" /></a>
            </div>
            {% if (state == 'installing') %}
                <div class="gpm-actions">
                    <a class="button" href="{{ base_url_relative }}/themes/{{ slug }}/task{{ config.system.param_sep }}install"><i class="fa fa-plus"></i> {{ "PLUGIN_ADMIN.INSTALL"|tu }}</a>
                </div>
            {% elseif state == 'active' %}
                <div class="gpm-actions">
                    <i class="fa fa-star"></i> {{ "PLUGIN_ADMIN.ACTIVE_THEME"|tu }}
                </div>
            {% else %}
                <a data-remodal-target="theme-switch-warn" href="{{ base_url_relative }}/themes/{{ slug }}/task{{ config.system.param_sep }}activate" class="gpm-actions">
                    {# <a class="disabled" href="{{ base_url_relative }}/themes/{{ slug }}/task{{ config.system.param_sep }}activate"><i class="fa fa-fw fa-toggle-off"></i></a> #}
                    Activate
                </a>
            {% endif %}


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

<div class="remodal theme-switcher" data-remodal-id="theme-switch-warn" data-remodal-options="hashTracking: false">
    <form>
        <h1>{{ "PLUGIN_ADMIN.SWITCHING_TO"|tu }} <strong>{theme_name}</strong></h1>
        <p class="bigger">
            {{ "PLUGIN_ADMIN.SWITCHING_TO_DESCRIPTION"|tu }}
        </p>
        <p class="bigger">
            {{ "PLUGIN_ADMIN.SWITCHING_TO_CONFIRMATION"|tu }} <strong>{theme_name}</strong>?
        </p>
        <br>
        <div class="button-bar">
            <a class="button secondary remodal-cancel" href="#"><i class="fa fa-fw fa-close"></i> {{ "PLUGIN_ADMIN.CANCEL"|tu }}</a>
            <a class="button continue" href="#"><i class="fa fa-fw fa-check"></i>{{ "PLUGIN_ADMIN.CONTINUE"|tu }}</a>
        </div>
    </form>
</div>
