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

{% block title %}{% trans "Video Lessons" %}{% endblock %}

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

    <h1 class="h2">{% trans "Video Lessons" %}</h1>
    <p class="p">{% trans "Educational video content on digital economy, artificial intelligence, and data analytics." %}</p>

    {% if video_lessons %}
    <div class="video-grid">
      {% for video in video_lessons %}
      <div class="video-card">
        <a href="{% url 'video_detail' video.pk %}">
          <img src="{{ video.thumbnail.url }}" alt="{{ video.title }}" class="video-thumbnail">
        </a>
        <div class="video-info">
          <h4><a href="{% url 'video_detail' video.pk %}">{{ video.title }}</a></h4>
          <p class="video-meta">
            <span>{% trans "Duration" %}: {{ video.duration }}</span>
            <span>{% trans "Views" %}: {{ video.views }}</span>
            <span>{% trans "Language" %}: {{ video.get_language_display }}</span>
          </p>
          <p class="video-description">{{ video.description|truncatewords:30 }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="no-content">
      <p>{% trans "No video lessons available." %}</p>
    </div>
    {% endif %}

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