{% if page.meta.published_time or page.meta.status %}
  <p class="d-flex align-items-center border-bottom pb-3">
    {% if page.meta.published_time %}
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-event" viewBox="0 0 16 16">
        <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/>
        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/>
      </svg>
      <span class="small ms-1 me-3" data-bs-toggle="tooltip" data-bs-title="Date published">{{ page.meta.published_time.strftime('%B %e, %Y') }}</span>
    {% endif %}
    {% if page.meta.status %}
      {% set status = page.meta.status | trim | lower %}
      {% if status == 'proposed' %}
        {% set color = 'info' %}
      {% elif status == 'accepted' %}
        {% set color = 'success' %}
      {% elif status == 'rejected' %}
        {% set color = 'danger' %}
      {% elif status == 'superseded' %}
        {% set color = 'warning' %}
      {% elif status == 'deprecated' %}
        {% set color = 'secondary' %}
      {% else %}
        {% set color = 'dark' %}
      {% endif %}
      <span class="badge text-bg-{{ color }}" data-bs-toggle="tooltip" data-bs-title="Status">{{ page.meta.status }}</span>
    {% endif %}
  </p>
{% endif %}