{% extends "sprout-base-import/_layouts/base" %}
{% import "_includes/forms" as forms %}

{% set title = 'Themes'|t('sprout-import') %}

{% set themes = craft.sproutImport.getSproutImportThemes() %}

{% block content %}

    <div class="theme-cards">

        {% for theme in themes %}

            <div class="theme-card">
                <div class="theme-header">
                    <h6>{{ theme.plugin.name }}</h6>
                    <strong>{{ theme.getName() }}</strong>
                </div>
                <div class="body">
                    <p>{{ theme.getDescription() }}</p>
                </div>
                <div class="buttons">
                    <form method="post" accept-charset="utf-8">
                        {{ csrfInput() }}
                        {{ redirectInput("sprout-import/themes") }}
                        <input type="hidden" name="action"
                               value="sprout-import/import/install-theme">
                        <input type="hidden" name="className"
                               value="{{ theme.getClassName() }}">

                        <button class="btn submit"
                                type="submit">{{ 'Install Theme'|t }}</button>
                    </form>
                </div>
            </div>

        {% endfor %}

    </div>

{% endblock %}

{% block details %}

    <div class="meta">

        <h2>{{ "Themes"|t('sprout-import') }}
            <sup>{{ "beta"|t('sprout-import') }}</sup></h2>

        <p>{{ 'Themes allow you to reuse content architecture and templates.'|t('sprout-import') }}</p>

        <h6>{{ "Schema"|t }}</h6>
        <p>{{ 'Schema are defined in Craft import JSON format. See the documentation for supported Elements and Settings and import behavior.'|t('sprout-import') }}</p>

        <h6>{{ "Templates"|t }}</h6>
        <p>{{ 'Templates are defined in Theme integration and can be any number of nested folders and templates. Your Theme /templates folder will be copied to your Craft /templates folder and overwrite any existing templates of the same name.'|t('sprout-import') }}</p>

        <br>
        <hr>

        <h6>{{ "Getting Started"|t }}</h6>

        <p>{{ "See working Themes in the following Sprout plugins:"|t('sprout-import') }}</p>

        <ul class="bullets">
            <li>Sprout Forms</li>
            <li>Sprout Import</li>
            <li>Sprout Reports</li>
        </ul>

    </div>

{% endblock %}

{% css %}
    .theme-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    grid-gap: 20px;
    }
    .theme-card {
    border: 1px solid #e3e5e8;
    border-radius: 5px;
    padding: 20px;
    }
    .theme-card .body {
    margin-top: 8px;
    }

    @media (max-width: 600px) {
    .theme-cards {
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
    }
    }
{% endcss %}