{% load i18n %}

<article class="transcript">
  <header class="mb-4">
    <h3 class="h4">
      {% if styleguide_episode %}
        {% blocktrans with title=styleguide_episode.title %}Transcript: {{ title }}{% endblocktrans %}
      {% else %}
        {% translate "Transcript" %}
      {% endif %}
    </h3>
    {% if styleguide_episode %}
      <p class="text-muted">
        <time datetime="{{ styleguide_episode.visible_date|date:'c' }}">{{ styleguide_episode.visible_date|date }}</time>
        · <a href="{{ styleguide_episode.page_url|default:styleguide_episode.url }}">{% translate "Back to episode" %}</a>
      </p>
      <p class="lead text-muted mb-0">
        {% translate "Full episode transcript. Timestamps refer to the audio playback." %}
      </p>
    {% endif %}
  </header>
  {% if styleguide_transcript.transcripts %}
    {% for segment in styleguide_transcript.transcripts %}
      <div class="transcript-segment border rounded p-3 mb-3">
        <div class="d-flex flex-wrap align-items-center small text-muted mb-2">
          {% if segment.speaker %}
            <span class="badge badge-secondary mr-2">{{ segment.speaker }}</span>
          {% endif %}
          {% if segment.start %}
            <time datetime="{{ segment.start }}">{{ segment.start }}</time>
          {% endif %}
        </div>
        <p class="transcript-text mb-0">{{ segment.text }}</p>
      </div>
    {% endfor %}
  {% else %}
    <p>{% translate "No transcript segments available." %}</p>
  {% endif %}
</article>