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

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

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

    <h1 class="h2" data-i18n="contact_title">{% trans "Contact Information" %}</h1>

    <!-- Contact Info -->
    {% if contact_info %}
    <div class="contact-grid">
      {% for contact in contact_info %}
      <div class="contact-item">
        {% if contact.icon_class %}
        <i class="{{ contact.icon_class }}"></i>
        {% endif %}
        <div class="contact-content">
          <h4>{{ contact.label }}</h4>
          {% if contact.link %}
          <a href="{{ contact.link }}" target="_blank">{{ contact.value }}</a>
          {% else %}
          <p>{{ contact.value }}</p>
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}

    <!-- Social Profiles -->
    {% if social_profiles %}
    <section style="margin-top:50px;">
      <h2 class="h3">{% trans "Professional Profiles" %}</h2>
      <div class="social-grid">
        {% for profile in social_profiles %}
        <a href="{{ profile.url }}" target="_blank" class="social-link">
          {% if profile.icon_class %}
          <i class="{{ profile.icon_class }}"></i>
          {% endif %}
          <span>{{ profile.platform }}</span>
        </a>
        {% endfor %}
      </div>
    </section>
    {% endif %}

    <!-- Skills -->
    {% if skills %}
    <section style="margin-top:50px;">
      <h2 class="h3">{% trans "Skills & Expertise" %}</h2>
      {% regroup skills by category as skill_categories %}
      {% for category in skill_categories %}
      <div class="skill-category">
        <h4>{{ category.grouper|title }}</h4>
        <div class="skills-list">
          {% for skill in category.list %}
          <div class="skill-item">
            <span class="skill-name">{{ skill.name }}</span>
            <div class="skill-bar">
              <div class="skill-fill" style="width: {{ skill.proficiency }}%"></div>
            </span>
            <span class="skill-percent">{{ skill.proficiency }}%</span>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </section>
    {% endif %}

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