{% load app_extras %}

<div class="details-top d-flex mb-4">
  <div class="image">
    <img class="{% if media.image == IMG_NONE %}image-not-found{% else %}poster{% endif %}"
         src="{{ media.image }}"
         alt="{{ media.title }}" />
  </div>
  <div class="details-data d-flex flex-column align-items-start">

    {% if tv %}
      <h2 class="tv-title fs-5 mb-0">
        <a href="{% url 'media_details' media_type="tv" media_id=tv.media_id title=tv.title|slug %}">
          {{ tv.title|capfirst }}
        </a>
      </h2>
    {% endif %}

    <h1 class="title">{{ media.title }}</h1>
    <p>{{ media.synopsis|safe }}</p>

    <div class="additional-data d-flex flex-wrap">
      {% for key, value in media.details.items %}
        <span>
          <label class="text-body-secondary" for="{{ key }}">{{ key|no_underscore|upper }}</label>
          <span id="{{ key }}">{{ value|default_if_none:"Unknown" }}</span>
        </span>
      {% endfor %}
    </div>

    <div class="mt-sm-auto mt-3 d-flex gap-2">
      {% include "app/components/open_modal.html" with modal_type="track" source=media.source image=media.image %}
      {% include "app/components/open_modal.html" with modal_type="lists" source=media.source image=media.image %}
      {% include "app/components/open_modal.html" with modal_type="history" source=media.source image=media.image %}
    </div>
  </div>
</div>
