{% extends 'base.html' %}
{% load i18n %}

{% block title %}{{ video.title }}{% endblock %}

{% block content %}
<section class="section fade-in">
  <div class="container">

    <div class="video-detail">
      <div class="video-player">
        <video controls preload="metadata" poster="{{ video.thumbnail.url }}">
          <source src="{{ video.video_file.url }}" type="video/mp4">
          {% trans "Your browser does not support the video tag." %}
        </video>
      </div>

      <div class="video-content">
        <h1 class="h2">{{ video.title }}</h1>
        <div class="video-meta">
          <span>{% trans "Duration" %}: {{ video.duration }}</span>
          <span>{% trans "Views" %}: {{ video.views }}</span>
          <span>{% trans "Language" %}: {{ video.get_language_display }}</span>
          <span>{% trans "Uploaded" %}: {{ video.upload_date|date:"M d, Y" }}</span>
        </div>
        <p class="video-description">{{ video.description }}</p>
      </div>
    </div>

    {% if related_videos %}
    <section style="margin-top:50px;">
      <h2 class="h3">{% trans "Related Videos" %}</h2>
      <div class="related-videos">
        {% for related_video in related_videos %}
        <div class="related-video-card">
          <a href="{% url 'video_detail' related_video.pk %}">
            <img src="{{ related_video.thumbnail.url }}" alt="{{ related_video.title }}">
            <h4>{{ related_video.title }}</h4>
          </a>
          <p>{{ related_video.duration }}</p>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

  </div>
</section>
{% endblock %}