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

{% block title %}{% trans "Education" %} — Munavvarkhon Mukhitdinova{% endblock %}
{% block description %}{% trans "Education background of Munavvarkhon Mukhitdinova, including doctoral, PhD, MBA and undergraduate studies." %}{% endblock %}

{% block content %}
<section class="section fade-in">
  <div class="container">
    <h1 class="h2" data-i18n="edu_title">{% trans "Education" %}</h1>
    <p class="p" data-i18n="edu_l1">{% trans "Academic background and educational qualifications." %}</p>

    <!-- Doctorate Degrees -->
    {% if degrees_by_type.doctorate %}
    <section style="margin-top: 40px;">
      <h2 class="h3">{% trans "Doctoral Studies" %}</h2>
      <div class="education-grid">
        {% for education in degrees_by_type.doctorate %}
        <div class="edu-card">
          {% if education.diploma_image %}
          <img src="{{ education.diploma_image.url }}" alt="{{ education.title }} Diploma">
          {% else %}
          <img src="{% static 'img/placeholder-diploma.png' %}" alt="Diploma">
          {% endif %}
          <div class="edu-info">
            <h4>{{ education.title }}</h4>
            <p class="institution">{{ education.institution }}</p>
            <p class="degree">{{ education.get_degree_display }}</p>
            <p class="year">{{ education.year }}</p>
            <p class="country">{{ education.country }}</p>
            {% if education.description %}
            <p class="description">{{ education.description }}</p>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Master's Degrees -->
    {% if degrees_by_type.masters %}
    <section style="margin-top: 40px;">
      <h2 class="h3">{% trans "Master's Studies" %}</h2>
      <div class="education-grid">
        {% for education in degrees_by_type.masters %}
        <div class="edu-card">
          {% if education.diploma_image %}
          <img src="{{ education.diploma_image.url }}" alt="{{ education.title }} Diploma">
          {% else %}
          <img src="{% static 'img/placeholder-diploma.png' %}" alt="Diploma">
          {% endif %}
          <div class="edu-info">
            <h4>{{ education.title }}</h4>
            <p class="institution">{{ education.institution }}</p>
            <p class="degree">{{ education.get_degree_display }}</p>
            <p class="year">{{ education.year }}</p>
            <p class="country">{{ education.country }}</p>
            {% if education.description %}
            <p class="description">{{ education.description }}</p>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Bachelor's Degrees -->
    {% if degrees_by_type.bachelors %}
    <section style="margin-top: 40px;">
      <h2 class="h3">{% trans "Bachelor's Studies" %}</h2>
      <div class="education-grid">
        {% for education in degrees_by_type.bachelors %}
        <div class="edu-card">
          {% if education.diploma_image %}
          <img src="{{ education.diploma_image.url }}" alt="{{ education.title }} Diploma">
          {% else %}
          <img src="{% static 'img/placeholder-diploma.png' %}" alt="Diploma">
          {% endif %}
          <div class="edu-info">
            <h4>{{ education.title }}</h4>
            <p class="institution">{{ education.institution }}</p>
            <p class="degree">{{ education.get_degree_display }}</p>
            <p class="year">{{ education.year }}</p>
            <p class="country">{{ education.country }}</p>
            {% if education.description %}
            <p class="description">{{ education.description }}</p>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Other Education -->
    {% if degrees_by_type.other %}
    <section style="margin-top: 40px;">
      <h2 class="h3">{% trans "Other Qualifications" %}</h2>
      <div class="education-grid">
        {% for education in degrees_by_type.other %}
        <div class="edu-card">
          {% if education.diploma_image %}
          <img src="{{ education.diploma_image.url }}" alt="{{ education.title }} Diploma">
          {% else %}
          <img src="{% static 'img/placeholder-diploma.png' %}" alt="Diploma">
          {% endif %}
          <div class="edu-info">
            <h4>{{ education.title }}</h4>
            <p class="institution">{{ education.institution }}</p>
            <p class="degree">{{ education.get_degree_display }}</p>
            <p class="year">{{ education.year }}</p>
            <p class="country">{{ education.country }}</p>
            {% if education.description %}
            <p class="description">{{ education.description }}</p>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    {% if not education_items %}
    <div class="no-content">
      <p>{% trans "No education information available." %}</p>
    </div>
    {% endif %}

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