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

{% block title %}{% trans "About" %} — Munavvarkhon Mukhitdinova{% endblock %}
{% block description %}{% trans "About Munavvarkhon Mukhitdinova — academic and research profile." %}{% endblock %}

{% block content %}
<section class="section fade-in">
  <div class="container">
    <h1 class="h2" data-i18n="about_title">{% trans "About Me" %}</h1>

    <!-- Profile Summary -->
    <div class="profile-summary">
      <p data-i18n="about_p1">{% trans "Doctor of Science in Economics, Associate Professor with extensive experience in academic research and teaching." %}</p>
      <p data-i18n="about_p2">{% trans "Specialized in digital economy, artificial intelligence, and big data analytics." %}</p>
      <p data-i18n="about_p3">{% trans "Author of numerous scientific publications in Scopus-indexed journals." %}</p>
      <p data-i18n="about_p4">{% trans "Participant in international research projects and conferences." %}</p>
    </div>

    <!-- Research Metrics -->
    {% if metrics %}
    <section style="margin-top: 40px;">
      <h2 class="h3">{% trans "Research Metrics" %}</h2>
      <div class="metrics-summary">
        <div class="metric-item">
          <span class="metric-value">{{ metrics.h_index }}</span>
          <span class="metric-label">h-index</span>
        </div>
        <div class="metric-item">
          <span class="metric-value">{{ metrics.citations }}</span>
          <span class="metric-label">{% trans "Citations" %}</span>
        </div>
        <div class="metric-item">
          <span class="metric-value">{{ metrics.publications }}</span>
          <span class="metric-label">{% trans "Publications" %}</span>
        </div>
      </div>
    </section>
    {% endif %}

    <!-- Education -->
    {% if education %}
    <section style="margin-top: 40px;">
      <h2 class="h3">{% trans "Education" %}</h2>
      <div class="education-list">
        {% for edu in education %}
        <div class="education-item">
          <h4>{{ edu.get_degree_display }} - {{ edu.title }}</h4>
          <p>{{ edu.institution }}, {{ edu.year }}</p>
          {% if edu.description %}
          <p class="description">{{ edu.description }}</p>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Experience -->
    {% if experiences %}
    <section style="margin-top: 40px;">
      <h2 class="h3">{% trans "Professional Experience" %}</h2>
      <div class="experience-list">
        {% for exp in experiences %}
        <div class="experience-item">
          <h4>{{ exp.position }}</h4>
          <p>{{ exp.institution }} ({{ exp.duration }})</p>
          <p class="description">{{ exp.description|truncatewords:20 }}</p>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Skills -->
    {% if skills %}
    <section style="margin-top: 40px;">
      <h2 class="h3">{% trans "Skills & Expertise" %}</h2>
      <div class="skills-grid">
        {% for skill in skills %}
        <div class="skill-item">
          <div class="skill-header">
            <span class="skill-name">{{ skill.name }}</span>
            <span class="skill-category">{{ skill.get_category_display }}</span>
          </div>
          <div class="skill-bar">
            <div class="skill-fill" style="width: {{ skill.proficiency }}%"></div>
          </div>
          <span class="skill-percentage">{{ skill.proficiency }}%</span>
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Awards -->
    {% if awards %}
    <section style="margin-top: 40px;">
      <h2 class="h3">{% trans "Awards & Honors" %}</h2>
      <div class="awards-list">
        {% for award in awards %}
        <div class="award-item">
          <h4>{{ award.title }}</h4>
          <p>{{ award.awarding_body }}, {{ award.year }}</p>
          {% if award.description %}
          <p class="description">{{ award.description }}</p>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- CV Download -->
    <div class="cv-container" style="margin-top: 40px;">
      <a class="btn" href="{% static 'files/Resume_Mukhitdinova_Variant1_Academic.docx' %}" download>
        {% trans "Download CV" %}
      </a>
    </div>

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