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

{% block title %}{% trans "Projects" %}{% endblock %}

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

    <h1 class="h2" data-i18n="proj_title">{% trans "Projects & Video Lessons" %}</h1>
    <p class="p" data-i18n="proj_text">{% trans "Research projects and educational video lessons on digital economy, artificial intelligence and big data analytics." %}</p>

    <!-- Research Projects -->
    {% if research_projects %}
    <section id="research-projects" style="margin-top:50px;">
      <h2 class="h3">{% trans "Research Projects" %}</h2>
      <div class="projects-grid">
        {% for project in research_projects %}
        <div class="project-card">
          <h4>{{ project.title }}</h4>
          <p class="project-type">{{ project.get_project_type_display }}</p>
          <p class="description">{{ project.description|truncatewords:30 }}</p>
          <div class="project-meta">
            <span>{% trans "Start" %}: {{ project.start_date|date:"M Y" }}</span>
            {% if project.end_date %}
            <span>{% trans "End" %}: {{ project.end_date|date:"M Y" }}</span>
            {% endif %}
            {% if project.funding_body %}
            <span>{% trans "Funding" %}: {{ project.funding_body }}</span>
            {% endif %}
          </div>
          {% if project.link %}
          <p><a href="{{ project.link }}" target="_blank" class="btn-small">{% trans "Learn More" %}</a></p>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Educational Projects -->
    {% if educational_projects %}
    <section id="educational-projects" style="margin-top:50px;">
      <h2 class="h3">{% trans "Educational Projects" %}</h2>
      <div class="projects-grid">
        {% for project in educational_projects %}
        <div class="project-card">
          <h4>{{ project.title }}</h4>
          <p class="description">{{ project.description|truncatewords:30 }}</p>
          <div class="project-meta">
            <span>{% trans "Start" %}: {{ project.start_date|date:"M Y" }}</span>
            {% if project.end_date %}
            <span>{% trans "End" %}: {{ project.end_date|date:"M Y" }}</span>
            {% endif %}
          </div>
          {% if project.link %}
          <p><a href="{{ project.link }}" target="_blank" class="btn-small">{% trans "Learn More" %}</a></p>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Video Lessons -->
    {% if video_lessons %}
    <section id="videos" style="margin-top:50px;">
      <h2 class="h3">{% trans "Video Lessons" %}</h2>
      <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>
            </p>
            <p class="video-description">{{ video.description|truncatewords:20 }}</p>
          </div>
        </div>
        {% endfor %}
      </div>
      <div style="text-align: center; margin-top: 30px;">
        <a href="{% url 'video_lessons' %}" class="btn">{% trans "View All Videos" %}</a>
      </div>
    </section>
    {% endif %}

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