{#
 # For the full copyright and license information, please view the
 # docs/licenses/LICENSE.txt file that was distributed with this source code.
 #}

<div id="combinations-empty-state" class="d-none">
  <div class="text-center showcase-list-card">
    <img alt="{{ 'Generate product combinations'|trans({}, 'Admin.Catalog.Feature') }}" title="{{ 'Generate product combinations'|trans({}, 'Admin.Catalog.Feature') }}" class="img-responsive mt-3" src="{{ asset('themes/new-theme/img/empty_state/combinations.svg') }}" width="320" height="auto">

    <p class="mt-4 showcase-list-card__header">{{ 'Generate product combinations'|trans({}, 'Admin.Catalog.Feature') }}</p>

    <p class="mx-auto showcase-list-card__message">
      {{ 'Combinations are the different variations of a product, with attributes like its size, weight or color taking different values.'|trans({}, 'Admin.Catalog.Feature') }}
      {{ 'To add combinations, you first need to create proper attributes and values in [1]%attributes_and_features_label%[/1].'|trans({'%attributes_and_features_label%': 'Attributes & Features'|trans({}, 'Admin.Navigation.Menu'), '[1]': '<a class="alert-link" href=' ~ path('admin_attribute_groups_index') ~ ' target="_blank">', '[/1]': '</a>'}, 'Admin.Catalog.Help')|raw_purified }}
    </p>

    <div class="mt-4">
      <a href="{{ documentation_link('combinations') }}" target="_blank" class="btn btn-outline-secondary mr-1">{{ 'Learn more'|trans({}, 'Admin.Actions') }}</a>
      <button type="button" class="btn btn-primary generate-combinations-button" disabled="disabled">
        {{ 'Generate combinations'|trans({}, 'Admin.Catalog.Feature') }}
      </button>
    </div>
  </div>
</div>
