{#
 # For the full copyright and license information, please view the
 # docs/licenses/LICENSE.txt file that was distributed with this source code.
 #}
{% extends '@PrestaShop/Admin/layout.html.twig' %}
{% set layoutHeaderToolbarBtn = {
  add: {
    href: path('admin_themes_import'),
    desc: 'Add new theme'|trans({}, 'Admin.Design.Feature'),
    icon: 'add_circle_outline',
  },
  export: {
    href: path('admin_themes_export_current'),
    desc: 'Export current theme'|trans({}, 'Admin.Design.Feature'),
    icon: 'cloud_download',
  },
  } %}

{% block content %}
  <div id="themes-logo-page">

    {% if not isSingleShopContext %}
      <div class="alert alert-info">
        <p class="alert-text">
          {{ 'You must select a shop from the above list if you wish to choose a theme.'|trans({}, 'Admin.Design.Help') }}
        </p>
      </div>
    {% endif %}

    {% if isInstalledRtlLanguage %}
      {{ include('@PrestaShop/Admin/Improve/Design/Theme/Blocks/rtl_configuration.html.twig') }}
    {% endif %}

    {{ form_start(shopLogosForm, {action: path('admin_themes_upload_logos')}) }}
    {% if not isInstalledRtlLanguage and isSingleShopContext and isMultiShopFeatureUsed %}
      {{ include('@PrestaShop/Admin/Improve/Design/Theme/Blocks/multishop_switch.html.twig') }}
    {% endif %}
    <div class="card">
      <div class="card-header">
        {{ 'Logo'|trans({}, 'Admin.Global') }}
      </div>
      <div class="card-body logo-configuration-card-body">
        {{ include('@PrestaShop/Admin/Improve/Design/Theme/Blocks/logo_configuration.html.twig') }}
      </div>
      <div class="card-footer">
        <button class="btn btn-primary float-right">
          {{ 'Save'|trans({}, 'Admin.Actions') }}
        </button>
        <div class="clearfix">&nbsp;</div>
      </div>
    </div>
    {{ form_rest(shopLogosForm) }}
    {{ form_end(shopLogosForm) }}

    <div class="card">
      <div class="card-header" data-role="theme-shop">
        {{ 'My theme for %name% shop'|trans({'%name%': shopName}, 'Admin.Design.Feature') }}
      </div>
      <div class="card-body">
        <div class="row">
          {% embed '@PrestaShop/Admin/Improve/Design/Theme/Blocks/Partials/theme_card.html.twig' with {
            themeName: theme.get('name'),
            themeDisplayName: theme.get('display_name'),
            themeVersion: currentlyUsedTheme.get('version'),
            themeAuthor: currentlyUsedTheme.get('author.name'),
            themeAuthorUrl: theme.get('author.url'),
            themeFramework: theme.get('meta.compatibility.framework'),
            isActive: true,
          } %}
            {% block image %}
              <img src="{{ baseShopUrl }}{{ currentlyUsedTheme.get('preview') }}" alt="{{ currentlyUsedTheme.get('display_name') }}">
            {% endblock %}
            {% block button_container %}
              <button class="btn action-button">
                <i class="material-icons icon-current-theme">done</i>
                {{ 'My current theme'|trans({}, 'Admin.Design.Feature') }}
              </button>
            {% endblock %}
          {% endembed %}

          {% if notUsedThemes is not empty %}
            {% for theme in notUsedThemes %}
              {% embed '@PrestaShop/Admin/Improve/Design/Theme/Blocks/Partials/theme_card.html.twig' with {
                themeName: theme.get('name'),
                themeDisplayName: theme.get('display_name'),
                themeVersion: theme.get('version'),
                themeAuthor: theme.get('author.name'),
                themeAuthorUrl: theme.get('author.url'),
                themeFramework: theme.get('meta.compatibility.framework'),
                isActive: false,
              } %}
                {% block image %}
                  <img src="{{ baseShopUrl }}{{ theme.get('preview') }}" alt="{{ theme.get('display_name') }}">
                {% endblock %}
                {% block button_container %}
                  <form action="{{ path('admin_themes_enable', {themeName: theme.name}) }}" method="post" class="d-inline">
                    <input type="hidden" name="token" value="{{ csrf_token('enable-theme') }}"/>
                    <button type="button" class="btn action-button js-display-use-theme-modal" {{ (not isSingleShopContext) ? 'disabled' : '' }}>
                      <i class="material-icons">
                        present_to_all
                      </i>
                      <span>{{ 'Use this theme'|trans({}, 'Admin.Design.Feature') }}</span>
                    </button>
                  </form>
                  <form action="{{ path('admin_themes_delete', {themeName: theme.name}) }}" method="post" class="d-inline">
                    <input type="hidden" name="token" value="{{ csrf_token('delete-theme') }}"/>
                    <button type="button" class="btn delete-button js-display-delete-theme-modal">
                      <i class="material-icons">
                        delete
                      </i>
                    </button>
                  </form>
                {% endblock %}
              {% endembed %}
            {% endfor %}
          </div>

          {{ include('@PrestaShop/Admin/Improve/Design/Theme/Blocks/use_theme_modal.html.twig') }}
          {{ include('@PrestaShop/Admin/Improve/Design/Theme/Blocks/delete_theme_modal.html.twig') }}
        {% endif %}

        {{ renderhook('displayAdminThemesListAfter', {current_theme_name: currentlyUsedTheme.get('name')}) }}

        {{ include('@PrestaShop/Admin/Improve/Design/Theme/Blocks/layouts_configuration.html.twig') }}
      </div>
    </div>

  </div>
{% endblock %}

{% block javascripts %}
  {{ parent() }}

  <script src="{{ asset('themes/new-theme/public/themes.bundle.js') }}"></script>
{% endblock %}
