{% load spellbook_tags %}
<div class="sb-metadata sb-metadata-user sb-rounded sb-border sb-p-3 sb-my-4 sb-bg-secondary-25 sb-w-full">
  <div class="sb-metadata-grid sb-grid sb-grid-cols-1 sb-md:grid-cols-2 sb-gap-2">

    {% comment %} Published Date (Grid Item 1 on md+) {% endcomment %}
    {% if metadata.published %}
    <div class="sb-metadata-item sb-flex sb-items-center sb-gap-1">
      <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">Published:</span>
      <span class="sb-metadata-value sb-text-sm">{{ metadata.published|date:"d M Y" }}</span>
    </div>
    {% endif %}

    {% comment %} Modified Date (Grid Item 2 on md+) {% endcomment %}
    {% if metadata.modified %}
      {% if not metadata.published or metadata.modified != metadata.published %}
      <div class="sb-metadata-item sb-flex sb-items-center sb-gap-1">
        <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">Modified:</span>
        <span class="sb-metadata-value sb-text-sm">{{ metadata.modified|date:"d M Y" }}</span>
      </div>
      {% endif %}
    {% endif %}

    {% comment %} Word Count (Grid Item 3 on md+) {% endcomment %}
    {% if metadata.word_count %}
    <div class="sb-metadata-item sb-flex sb-items-center sb-gap-1">
      <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">Word count:</span>
      <span class="sb-metadata-value sb-text-sm">{{ metadata.word_count }}</span>
    </div>
    {% endif %}

    {% comment %} Reading Time (Grid Item 4 on md+) {% endcomment %}
    {% if metadata.reading_time_minutes %}
    <div class="sb-metadata-item sb-flex sb-items-center sb-gap-1">
      <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">Reading time:</span>
      <span class="sb-metadata-value sb-text-sm">{{ metadata.reading_time_minutes|floatformat:0 }} min read</span>
    </div>
    {% endif %}

    {% comment %} Custom Metadata Items - Each is a grid item (Item 5, 6, 7... on md+) {% endcomment %}
    {% if metadata.custom_meta %}
      {% for key, value in metadata.custom_meta.items %}
        <div class="sb-metadata-item sb-flex sb-items-center sb-gap-1">
          <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">{{ key|title }}:</span>
          <span class="sb-metadata-value sb-text-sm">{{ value }}</span>
        </div>
      {% endfor %}
    {% endif %}
  </div> {# End of sb-metadata-grid #}

  {% comment %} Tags are outside the main grid, displayed below it {% endcomment %}
  {% if metadata.tags %}
  <div class="sb-metadata-tags sb-mt-2">
    <div class="sb-flex sb-items-center sb-gap-1 sb-flex-wrap">
      <span class="sb-metadata-label sb-text-sm sb-font-bold sb-secondary">Tags:</span>
      {% for tag in metadata.tags %}
        <span class="sb-tag sb-bg-secondary-10 sb-primary sb-text-xs sb-px-2 sb-py-1 sb-rounded-full">{{ tag }}</span>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</div>
