{#
/**
 * @file
 * UI Patterns meta information.
 */
#}
{% if component is not empty %}
  <div class="bg-white  border-gray-200 rounded-xl shadow-sm p-6 space-y-4">

    <p class="text-md text-gray-600">
      <span class="font-semibold text-gray-800">ID:</span>
      <code class="bg-gray-100 text-blue-600 px-2 py-0.5 rounded">{{ component.id }}</code>
    </p>

    {% if component.description %}
      <p class="text-gray-700">{{ component.description }}</p>
    {% endif %}

    {% if component.status %}
      <p>
        <span class="text-md font-medium text-gray-600">Status:</span>
        <span class="inline-block text-xs uppercase tracking-wide font-bold rounded px-2 py-0.5
          {% if component.status == 'stable' %}
            bg-green-100 text-green-700
          {% elseif component.status == 'deprecated' %}
            bg-yellow-100 text-yellow-700
          {% else %}
            bg-gray-100 text-gray-700
          {% endif %}
        ">
          {{ component.status }}
        </span>
      </p>
    {% endif %}

    {% if component.links %}
      <div>
        <h4 class="text-md font-semibold text-gray-700 mb-1">Documentation</h4>
        {% if component.links|length > 1 %}
          <ul class="list-disc list-inside text-blue-600 space-y-1">
            {% for link in component.links %}
              <li>
                <a class="hover:underline" href="{{ link.url }}" target="_blank">
                  {{ link.title|default('External documentation'|t) }}
                </a>
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <p>
            {% set link = component.links|first %}
            <a class="text-blue-600 hover:underline" href="{{ link.url }}" target="_blank">
              {{ link.title|default('External documentation'|t) }}
            </a>
          </p>
        {% endif %}
      </div>
    {% endif %}

    {% if component.replaces %}
      <p class="text-md text-gray-600">
        <span class="font-semibold">Replaces:</span>
        <a href="{{ url('ui_patterns_library.single', {
          provider: component.replaces|split(':')|first,
          machineName: component.replaces|split(':')|last
        }) }}"
        class="text-blue-600 hover:underline">{{ component.replaces }}</a>
      </p>
    {% endif %}

    {% if component.tags %}
      <p class="text-md text-gray-600">
        <span class="font-semibold">Tags:</span>
        <span class="inline-block bg-gray-100 text-gray-700 px-2 py-0.5 rounded">
          {{ component.tags|join(', ') }}
        </span>
      </p>
    {% endif %}

  </div>
{% endif %}
