{#
/**
 * @file
 * UI Pattern meta information.
 */
#}

{% if pattern is not empty %}

  {# Pattern name and description. #}
  <h3 class="pattern-preview__label">{{ pattern.label }}</h3>
  <p class="pattern-preview__description">{{ pattern.description }}</p>
  {# External documentation links. #}
  {% if pattern.render_links %}
    <p>
      {% for renderLink in pattern.render_links %}
        {{ renderLink|add_class('btn btn-sm btn-primary') }}
      {% endfor %}
    </p>
  {% endif %}

  {% if pattern.tags %}
    <p class="pattern-preview__tags">
      {% for tag in pattern.tags %}
        {{ pattern('badge', {
          'label': tag,
          'attributes': create_attribute({
            'class': [
              'text-bg-secondary'
            ]
          }),
        }) }}
      {% endfor %}
    </p>
  {% endif %}

  {# Pattern fields descriptions. #}
  {% if pattern.fields or pattern.additional.settings %}
    <div class="table-responsive">
      <table class="pattern-preview__fields table">
        <thead>
        <tr>
          <th>{{ "Type"|t }}</th>
          <th>{{ "Name"|t }}</th>
          <th>{{ "Label"|t }}</th>
          <th>{{ "Type"|t }}</th>
          <th>{{ "Description"|t }} / {{ "Options"|t }}</th>
        </tr>
        </thead>
        <tbody>
        {% for field in pattern.fields %}
          <tr>
            <td>{{ "Field"|t }}</td>
            <td><code>{{ field.name }}</code></td>
            <td>{{ field.label }}</td>
            <td><code>{{ field.type }}</code></td>
            <td>{{ field.description }}</td>
          </tr>
        {% endfor %}
        {% for name, setting in pattern.additional.settings %}
          <tr>
            <td>{{ "Setting"|t }}</td>
            <td><code>{{ name }}</code></td>
            <td>{{ setting.label }}</td>
            <td><code>{{ setting.type }}</code></td>
            <td>{{ setting.description }}
              {% if setting.options %}
                <ul>
                  {% for key, label in setting.options %}
                    <li>{{ key }}: {{ label }}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}

{% endif %}
