{% extends ajax-suffix ? "@gantry-admin/partials/ajax.html.twig" : "@gantry-admin/partials/base.html.twig" %}

{% set settings_url = gantry.platform.settings %}
{% set settings_key = gantry.platform.settings_key %}

{% block content %}
    <div id="g5-container" class="g-container">
        <div class="inner-container">
            <div class="g-grid">
                <div class="g-block main-block">
                    <section id="main">
                        <div data-g5-content="">
                            {% block gantry %}
                                <div class="g-content" data-g5-content="">
                                    <div class="g-grid overview-header">
                                        <div class="g-block">
                                            <h2 class="theme-title"><i class="fa fa-fw fa-plug" aria-hidden="true"></i> {{ 'GANTRY5_PLATFORM_AVAILABLE_THEMES'|trans }}</h2>
                                        </div>
                                    {% if settings_url %}
                                        <div class="g-block">
                                            <a class="button button-primary float-right" href="{{ settings_url }}" data-settings-key="{{ settings_key }}">
                                                <i class="fa fa-cog" aria-hidden="true"></i> {{ 'GANTRY5_PLATFORM_PLATFORM_SETTINGS'|trans }}
                                            </a>
                                        </div>
                                    {% endif %}
                                    </div>
                                    <div class="themes cards-wrapper g-grid fixed-blocks">
                                        {% if themes|length %}
                                        {% for id, theme in themes %}
                                            <div class="theme card">
                                                <div class="theme-id">
                                                    {% if theme.details.icon %}<i class="fa fa-fw fa-{{ theme.details.icon }}" aria-hidden="true"></i>{% endif %}
                                                    {{ theme.title }} <span class="theme-info">(v{{ theme.details.version }} / {{ theme.name }})</span>
                                                </div>
                                                <div class="theme-screenshot">
                                                    {% if theme.admin_url %}
                                                    <a href="{{ theme.admin_url }}">
                                                    {% endif %}
                                                        <img src="{{ url(theme.thumbnail)|default('http://www.placehold.it/206x150/f4f4f4') }}" />
                                                    {% if theme.admin_url %}
                                                    </a>
                                                    {% endif %}
                                                </div>
                                                <div class="theme-name">
                                                    {% if theme.preview_url %}
                                                    <a class="button" href="{{ theme.preview_url }}" target="_blank">{{ 'GANTRY5_PLATFORM_PREVIEW'|trans }}</a>
                                                    {% endif %}
                                                    {% if theme.admin_url %}
                                                    <a class="button button-primary" href="{{ theme.admin_url }}">{{ 'GANTRY5_PLATFORM_CONFIGURE'|trans }}</a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                        {% else %}
                                            <p>{{ 'GANTRY5_PLATFORM_NO_THEMES_INSTALLED'|trans }}</p>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endblock %}
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block footer_section %}
{% endblock %}