{#**
 * 2007-2019 PrestaShop and Contributors
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2019 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *#}

{% import '@PrestaShop/Admin/macros.html.twig' as ps %}

<div class="card-group">
  {% embed '@PrestaShop/Admin/Improve/Design/Theme/Blocks/Partials/logo_card.html.twig' %}
    {% block card_title %}
      {{ form_widget(shopLogosForm.shop_logos.header_logo_is_restricted_to_shop) }} {{ 'Header logo'|trans({}, 'Admin.Design.Feature') }}
    {% endblock %}
    {% block card_content %}
      <p class="logo-card-description">
        {{ 'Will appear on your main page. Recommended size for the default theme: height %height% and width %width%.'|trans({'%height%': '40px', '%width%': '200px'}, 'Admin.Design.Help') }}
      </p>

      <div class="text-center logo-image-container">
        <img
          class="header-logo"
          src="{{ headerLogoPath }}"
          alt="{{ 'Header logo'|trans({}, 'Admin.Design.Feature') }}"
          title="{{ 'Header logo'|trans({}, 'Admin.Design.Feature') }}"
        >
      </div>

      {{ ps.form_group_row(shopLogosForm.shop_logos.header_logo) }}
    {% endblock %}
  {% endembed %}

  {% embed '@PrestaShop/Admin/Improve/Design/Theme/Blocks/Partials/logo_card.html.twig' %}
    {% block card_title %}
      <ul class="nav nav-pills" role="tablist">
        <li class="nav-item">
          {{ form_widget(shopLogosForm.shop_logos.mail_logo_is_restricted_to_shop) }}
          <a class="nav-link active show d-inline-block"
             id="mail-tab"
             data-toggle="tab"
             href="#email-configuration"
             role="tab"
             aria-controls="home"
             aria-expanded="true"
             aria-selected="true"
          >
            {{ 'Mail logo'|trans({}, 'Admin.Design.Feature') }}
          </a>
        </li>
        <li class="nav-item">
          {{ form_widget(shopLogosForm.shop_logos.invoice_logo_is_restricted_to_shop) }}
          <a class="nav-link d-inline-block"
             id="invoice-tab"
             data-toggle="tab"
             href="#invoice-configuration"
             role="tab"
             aria-controls="home"
             aria-expanded="true"
             aria-selected="true"
          >
             {{ 'Invoice logo'|trans({}, 'Admin.Design.Feature') }}
          </a>
        </li>
      </ul>
    {% endblock %}
    {% block card_content %}
      <div class="tab-content">
        <div class="tab-pane active show" id="email-configuration" role="tabpanel" aria-labelledby="logo-tab">
          <p class="logo-card-description description-in-tab">
            {{ 'Will appear on email headers. If undefined, the header logo will be used.'|trans({}, 'Admin.Design.Help') }}
          </p>

          <div class="text-center logo-image-container">
            <img
              class="email-logo"
              src="{{ mailLogoPath }}"
              alt="{{ 'Mail logo'|trans({}, 'Admin.Design.Feature') }}"
              title="{{ 'Mail logo'|trans({}, 'Admin.Design.Feature') }}"
            >
          </div>
          <div class="input-in-tab">
            {{ ps.form_group_row(shopLogosForm.shop_logos.mail_logo, {}, {'help': headerLogoPath == mailLogoPath ? 'Warning: if no email logo is available, the main logo will be used instead.'|trans({}, 'Admin.Design.Notification') : '' }) }}
          </div>
        </div>
        <div class="tab-pane" id="invoice-configuration" role="tabpanel" aria-labelledby="logo-tab">
          <p class="logo-card-description description-in-tab">
            {{ 'Will appear on invoice headers.'|trans({}, 'Admin.Design.Help') }}
          </p>

          <div class="text-center logo-image-container">
            <img
              class="invoice-logo"
              src="{{ invoiceLogoPath }}"
              alt="{{ 'Invoice logo'|trans({}, 'Admin.Design.Feature') }}"
              title="{{ 'Invoice logo'|trans({}, 'Admin.Design.Feature') }}"
            >
          </div>
          <div class="input-in-tab">
            {{ ps.form_group_row(shopLogosForm.shop_logos.invoice_logo, {}, {'help': headerLogoPath == invoiceLogoPath ? 'Warning: if no invoice logo is available, the main logo will be used instead.'|trans({}, 'Admin.Design.Help') : '' }) }}
          </div>
        </div>
      </div>
    {% endblock %}
  {% endembed %}

  {% embed '@PrestaShop/Admin/Improve/Design/Theme/Blocks/Partials/logo_card.html.twig' %}
    {% block card_title %}
      {{ form_widget(shopLogosForm.shop_logos.favicon_is_restricted_to_shop) }} {{ 'Favicon'|trans({}, 'Admin.Design.Feature') }}
    {% endblock %}
    {% block card_content %}
      <p class="logo-card-description">
        {{ 'It is the small icon that appears in browser tabs, next to the title.'|trans({}, 'Admin.Design.Help') }}
      </p>

      <div class="text-center logo-image-container">
          <img
            class="rounded-circle img-thumbnail favicon-logo"
            src="{{ faviconPath }}"
            alt="{{ 'Invoice logo'|trans({}, 'Admin.Design.Feature') }}"
            title="{{ 'Invoice logo'|trans({}, 'Admin.Design.Feature') }}"
          >
      </div>

      <div class="form-group row">
        <div class="col-sm">
          {{ ps.form_widget_with_error(shopLogosForm.shop_logos.favicon) }}
          <small class="form-text">
            {{ 'Use our [1]favicon generator on PrestaShop Marketplace[/1] to boost your brand image!'|trans({'[1]': '<a href="https://addons.prestashop.com/create-favicon.php?pab=1" target="_blank">', '[/1]': '</a>'}, 'Admin.Design.Help')|raw }}
          </small>
        </div>
      </div>

    {% endblock %}
  {% endembed %}
</div>