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

{% block extrahead %}
<style>
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

  .profile-container {
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%);
    min-height: 100vh;
    padding: 2rem 0;
  }

  .profile-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.5), 0 0 25px rgba(13, 202, 240, 0.3);
    border: 2px solid #6f42c1;
    overflow: hidden;
    margin-bottom: 2rem;
  }

  .profile-header {
    background: var(--cover-gradient, linear-gradient(135deg, #6f42c1, #e83e8c));
    color: white;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
  }

  .profile-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
  }

  .profile-avatar-container {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid transparent;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1)) padding-box,
      var(--avatar-border-gradient, linear-gradient(135deg, #868e96, #495057)) border-box;
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.2),
      0 0 25px rgba(111, 66, 193, 0.25);
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
  }

  .profile-avatar-container::after,
  .profile-avatar-container::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .profile-avatar-container::after {
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
  }

  .profile-avatar-container::before {
    inset: -10px;
    opacity: 0;
    z-index: -1;
  }

  .profile-avatar-container[data-tier="silver"]::before {
    opacity: 1;
    background: radial-gradient(circle, rgba(209, 233, 255, 0.4), transparent 70%);
    animation: orbitGlow 6s linear infinite;
  }

  .profile-avatar-container[data-tier="gold"]::before {
    opacity: 1;
    background: radial-gradient(circle, rgba(255, 214, 102, 0.25), transparent 65%);
    box-shadow: 0 0 35px rgba(255, 214, 102, 0.35);
    animation: goldPulse 4s ease-in-out infinite;
  }

  .profile-avatar-container[data-tier="mythic"]::before {
    opacity: 1;
    background: radial-gradient(circle, rgba(132, 94, 247, 0.35), transparent 60%);
    box-shadow: 0 0 45px rgba(34, 184, 207, 0.4);
    animation: cosmosWave 3s linear infinite;
  }
  @keyframes orbitGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 214, 102, 0.35); }
    50% { box-shadow: 0 0 35px rgba(240, 119, 43, 0.45); }
  }

  @keyframes cosmosWave {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
  }

  .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
  }

  .profile-subtitle {
    font-size: 1.1rem;
    margin: 0.5rem 0 0 0;
    opacity: 0.9;
    position: relative;
    z-index: 1;
  }

  .profile-body {
    padding: 2rem;
  }

  .info-section {
    margin-bottom: 2rem;
  }

  .info-section h4 {
    color: #6f42c1;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    border-left: 4px solid #6f42c1;
    padding-left: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }

  .info-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
  }

  .info-item:hover {
    border-color: #6f42c1;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.1);
    transform: translateY(-2px);
  }

  .info-label {
    font-weight: 600;
    color: #6f42c1;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .info-value {
    font-size: 1.1rem;
    color: #495057;
    font-weight: 500;
    word-break: break-word;
  }

  .info-value.empty {
    color: #6c757d;
    font-style: italic;
  }

  .bio-content {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid #6f42c1;
    font-style: italic;
    line-height: 1.6;
  }

  .action-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
  }

  .btn-elegant {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .btn-primary-elegant {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    color: white;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
  }

  .btn-primary-elegant:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(111, 66, 193, 0.4);
    color: white;
  }

  .btn-secondary-elegant {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
  }

  .btn-secondary-elegant:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
    color: white;
  }

  .btn-warning-elegant {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
  }

  .btn-warning-elegant:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    color: white;
  }

  .btn-info-elegant {
    background: linear-gradient(135deg, #17a2b8, #20c997);
    color: white;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
  }

  .btn-info-elegant:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.4);
    color: white;
  }

  .status-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 2px solid;
    transition: all 0.3s ease;
  }

  .status-card.warning {
    border-color: #ffc107;
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
  }

  .status-card.info {
    border-color: #17a2b8;
    background: linear-gradient(135deg, #d1ecf1, #b8e6e6);
  }

  .status-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .status-description {
    color: #495057;
    margin-bottom: 1rem;
  }

  .progress-indicator {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 2px solid #e9ecef;
  }

  .progress-title {
    font-weight: 600;
    color: #6f42c1;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .progress-bar-container {
    background: #e9ecef;
    border-radius: 10px;
    height: 12px;
    overflow: hidden;
    margin-bottom: 0.5rem;
  }

  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6f42c1, #e83e8c);
    border-radius: 10px;
    transition: width 0.3s ease;
  }

  .progress-text {
    font-size: 0.9rem;
    color: #6c757d;
    text-align: center;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .stat-card {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
  }

  .stat-card:hover {
    border-color: #6f42c1;
    transform: translateY(-2px);
  }

  .stat-icon {
    font-size: 2rem;
    color: #6f42c1;
    margin-bottom: 0.5rem;
  }

  .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #495057;
    margin-bottom: 0.25rem;
  }

  .stat-label {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
  }

  .verified-badge {
    background: rgba(40, 167, 69, 0.1);
    border: 2px solid rgba(40, 167, 69, 0.3);
    border-radius: 25px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    backdrop-filter: blur(10px);
    animation: verifiedPulse 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
  }

  .verified-badge i {
    color: #28a745;
    font-size: 1.2rem;
    margin-right: 0.5rem;
    animation: verifiedShine 3s ease-in-out infinite;
  }

  .verified-badge span {
    color: #28a745;
    font-weight: 600;
    font-size: 1rem;
  }

  .reward-section {
    margin-bottom: 2.5rem;
  }

  .reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  .reward-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    border: 2px solid #f1f3f5;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .reward-tier {
    padding: 1.5rem;
    color: white;
    position: relative;
  }

  .reward-tier::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.35), transparent 60%);
    pointer-events: none;
  }

  .reward-tier-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
  }

  .reward-tier h5 {
    margin: 0.5rem 0;
    font-size: 1.3rem;
    font-weight: 700;
  }
  .reward-tier[data-tier="mythic"] h5 {
    color: #f8f9fa;
    text-shadow:
      0 0 6px rgba(255, 255, 255, 0.8),
      0 0 12px rgba(255, 255, 255, 0.6),
      0 0 18px rgba(255, 255, 255, 0.4);
  }

  .reward-tier p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.95;
  }

  .reward-progress {
    padding: 1.5rem;
    border-top: 1px solid #f1f3f5;
  }

  .reward-progress-header {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .reward-progress-bar {
    height: 12px;
    border-radius: 999px;
    background: #edf2ff;
    overflow: hidden;
    margin-bottom: 0.75rem;
  }

  .reward-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6f42c1, #e83e8c);
    border-radius: 999px;
    transition: width 0.4s ease;
  }

  .next-tier-text {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #6c757d;
  }

  .reward-requirements {
    list-style: none;
    padding: 0 1.5rem 1.5rem;
    margin: 0;
  }

  .requirement-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid #f1f3f5;
    align-items: flex-start;
  }

  .requirement-item:last-child {
    border-bottom: none;
  }

  .requirement-item i {
    font-size: 1.1rem;
    margin-top: 0.15rem;
    color: #adb5bd;
  }

  .requirement-item.met i {
    color: #28a745;
  }

  .requirement-item span {
    font-weight: 600;
    color: #343a40;
    display: block;
  }

  .requirement-item small {
    display: block;
    color: #6c757d;
  }

  @keyframes verifiedPulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
  }

  @keyframes verifiedShine {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.8;
    }
  }

  .push-choices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem 1.5rem;
  }

  .push-choice-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
    font-weight: 500;
    color: #495057;
  }

  .push-choice-item input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #6f42c1;
  }

  .push-choice-item small {
    font-weight: normal;
  }

  @media (max-width: 768px) {
    .profile-body {
      padding: 1.5rem;
    }
    
    .profile-header {
      padding: 2rem 1.5rem;
    }
    
    .profile-name {
      font-size: 1.5rem;
    }
    
    .action-buttons {
      flex-direction: column;
    }
    
    .btn-elegant {
      width: 100%;
      justify-content: center;
    }
  }
</style>
{% endblock extrahead %}

{% block content %}
<div class="profile-container">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <!-- Profile Header Card -->
        <div class="profile-card">
          <div class="profile-header" style="--cover-gradient: {{ cover_reward.current_tier.gradient }};">
            <div class="profile-avatar-container" style="--avatar-border-gradient: {{ avatar_reward.current_tier.gradient }};" data-tier="{{ avatar_reward.current_tier.slug }}">
              {% if user.avatar %}
                <img src="{% url 'serve_files:serve_decrypted_file_with_timestamp' 'home' 'user' 'avatar' user.uuid timestamp %}"
                     alt="{% trans 'Imagem de perfil' %}" class="avatar-image">
              {% else %}
                <img class="avatar-image"
                     alt="{% trans 'Imagem de perfil padrão' %}"
                     src="{% static 'assets/img/team/generic_user.png' %}">
              {% endif %}
            </div>
            <h1 class="profile-name">{{ user.username }}</h1>
            <p class="profile-subtitle">
              {% if user.first_name and user.last_name %}
                {{ user.first_name }} {{ user.last_name }}
              {% else %}
                {% trans "Jogador" %}
              {% endif %}
            </p>
            {% if user.is_verified_account %}
              <div class="verified-badge">
                <i class="fas fa-check-circle"></i>
                <span>{% trans "Conta Verificada" %}</span>
              </div>
            {% endif %}
          </div>

          <div class="profile-body">
            <!-- Progress Indicator -->
            {% if not user.first_name or not user.last_name or not user.bio %}
              <div class="progress-indicator">
                <div class="progress-title">
                  <i class="fas fa-chart-line"></i>
                  {% trans "Progresso do Perfil" %}
                </div>
                <div class="progress-bar-container">
                  {% if not user.first_name and not user.last_name and not user.bio %}
                    <div class="progress-bar-fill" style="width: 0%;"></div>
                  {% elif not user.first_name or not user.last_name %}
                    <div class="progress-bar-fill" style="width: 33%;"></div>
                  {% elif not user.bio %}
                    <div class="progress-bar-fill" style="width: 66%;"></div>
                  {% endif %}
                </div>
                <div class="progress-text">
                  {% if not user.first_name and not user.last_name and not user.bio %}
                    {% trans "0/3 campos preenchidos" %}
                  {% elif not user.first_name or not user.last_name %}
                    {% trans "1/3 campos preenchidos" %}
                  {% elif not user.bio %}
                    {% trans "2/3 campos preenchidos" %}
                  {% endif %}
                </div>
              </div>
            {% endif %}

            <!-- Reward Section -->
            <div class="reward-section">
              <h4><i class="fas fa-gift"></i> {% trans "Recompensas de Personalização" %}</h4>
              <div class="reward-grid">
                <div class="reward-card">
                  <div class="reward-tier" style="background: {{ avatar_reward.current_tier.gradient }};">
                    <div class="reward-tier-label">{% trans "Borda do Avatar" %}</div>
                    <h5>{{ avatar_reward.current_tier.name }}</h5>
                    <p>{{ avatar_reward.current_tier.description }}</p>
                  </div>
                  <div class="reward-progress">
                    <div class="reward-progress-header">
                      <span>{% trans "Progresso" %}</span>
                      <span>{{ avatar_reward.progress_percent }}%</span>
                    </div>
                    <div class="reward-progress-bar">
                      <div class="reward-progress-fill" style="width: {{ avatar_reward.progress_percent }}%;"></div>
                    </div>
                    {% if avatar_reward.next_tier %}
                      <p class="next-tier-text">
                        {% blocktrans with tier=avatar_reward.next_tier.name %}
                        Próximo desbloqueio: {{ tier }}
                        {% endblocktrans %}
                      </p>
                    {% else %}
                      <p class="next-tier-text text-success">
                        <i class="fas fa-crown me-1"></i>{% trans "Você atingiu o nível máximo desta recompensa!" %}
                      </p>
                    {% endif %}
                  </div>
                  <ul class="reward-requirements">
                    {% for requirement in avatar_reward.requirements %}
                      <li class="requirement-item {% if requirement.met %}met{% endif %}">
                        <i class="fas {% if requirement.met %}fa-check-circle{% else %}fa-circle{% endif %}"></i>
                        <div>
                          <span>{{ requirement.label }}</span>
                          <small>{{ requirement.description }}</small>
                        </div>
                      </li>
                    {% endfor %}
                  </ul>
                </div>

                <div class="reward-card">
                  <div class="reward-tier" style="background: {{ cover_reward.current_tier.gradient }};" data-tier="{{ cover_reward.current_tier.slug }}">
                    <div class="reward-tier-label">{% trans "Capa de Perfil" %}</div>
                    <h5>{{ cover_reward.current_tier.name }}</h5>
                    <p>{{ cover_reward.current_tier.description }}</p>
                  </div>
                  <div class="reward-progress">
                    <div class="reward-progress-header">
                      <span>{% trans "Progresso" %}</span>
                      <span>{{ cover_reward.progress_percent }}%</span>
                    </div>
                    <div class="reward-progress-bar">
                      <div class="reward-progress-fill" style="width: {{ cover_reward.progress_percent }}%;"></div>
                    </div>
                    {% if cover_reward.next_tier %}
                      <p class="next-tier-text">
                        {% blocktrans with tier=cover_reward.next_tier.name %}
                        Próximo desbloqueio: {{ tier }}
                        {% endblocktrans %}
                      </p>
                    {% else %}
                      <p class="next-tier-text text-success">
                        <i class="fas fa-crown me-1"></i>{% trans "Você atingiu o nível máximo desta recompensa!" %}
                      </p>
                    {% endif %}
                  </div>
                  <ul class="reward-requirements">
                    {% for requirement in cover_reward.requirements %}
                      <li class="requirement-item {% if requirement.met %}met{% endif %}">
                        <i class="fas {% if requirement.met %}fa-check-circle{% else %}fa-circle{% endif %}"></i>
                        <div>
                          <span>{{ requirement.label }}</span>
                          <small>{{ requirement.description }}</small>
                        </div>
                      </li>
                    {% endfor %}
                  </ul>
                </div>
              </div>
            </div>

            <!-- Stats Grid -->
            <div class="stats-grid">
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-envelope"></i>
                </div>
                <div class="stat-value">
                  {% if user.is_email_verified %}
                    <i class="fas fa-check-circle text-success"></i>
                  {% else %}
                    <i class="fas fa-times-circle text-warning"></i>
                  {% endif %}
                </div>
                <div class="stat-label">{% trans "E-mail Verificado" %}</div>
              </div>
              
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-shield-alt"></i>
                </div>
                <div class="stat-value">
                  {% if user.is_2fa_enabled %}
                    <i class="fas fa-check-circle text-success"></i>
                  {% else %}
                    <i class="fas fa-times-circle text-warning"></i>
                  {% endif %}
                </div>
                <div class="stat-label">{% trans "2FA Ativo" %}</div>
              </div>
              
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="stat-value">
                  {% if user.addresses.exists %}
                    <i class="fas fa-check-circle text-success"></i>
                  {% else %}
                    <i class="fas fa-times-circle text-warning"></i>
                  {% endif %}
                </div>
                <div class="stat-label">{% trans "Endereço" %}</div>
              </div>
              
              <div class="stat-card">
                <div class="stat-icon">
                  <i class="fas fa-heart"></i>
                </div>
                <div class="stat-value">
                  {% if user.bio %}
                    <i class="fas fa-check-circle text-success"></i>
                  {% else %}
                    <i class="fas fa-times-circle text-warning"></i>
                  {% endif %}
                </div>
                <div class="stat-label">{% trans "Bio" %}</div>
              </div>
            </div>

            <!-- Push notification preferences -->
            <div class="info-section">
              <h4><i class="fas fa-bell"></i> {% trans "Notificações push" %}</h4>
              <p class="text-muted mb-3">{% trans "Escolha quais notificações deseja receber no dispositivo (quando estiver inscrito)." %}</p>
              <form method="post" action="{% url 'save_push_preferences' %}" class="push-preferences-form">
                {% csrf_token %}
                <div class="push-choices-grid">
                  {% for key, label, staff_only, enabled in push_choices_with_pref %}
                    <label class="push-choice-item">
                      <input type="checkbox" name="push_{{ key }}" value="1" {% if enabled %}checked{% endif %}>
                      <span>{{ label }}</span>
                      {% if staff_only %}<small class="text-muted">({% trans "admin" %})</small>{% endif %}
                    </label>
                  {% empty %}
                    <p class="text-muted">{% trans "Nenhuma opção disponível." %}</p>
                  {% endfor %}
                </div>
                <button type="submit" class="btn-elegant btn-primary-elegant mt-3">
                  <i class="fas fa-save"></i> {% trans "Salvar preferências" %}
                </button>
              </form>
            </div>

            <!-- Personal Information -->
            <div class="info-section">
              <h4><i class="fas fa-user"></i> {% trans "Informações Pessoais" %}</h4>
              <div class="info-grid">
                <div class="info-item">
                  <div class="info-label">
                    <i class="fas fa-envelope"></i> {% trans "E-mail" %}
                  </div>
                  <div class="info-value {% if not user.email %}empty{% endif %}">
                    {% if user.email %}{{ user.email }}{% else %}{% trans 'Não informado' %}{% endif %}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info-label">
                    <i class="fas fa-user-circle"></i> {% trans "Nome" %}
                  </div>
                  <div class="info-value {% if not user.first_name %}empty{% endif %}">
                    {% if user.first_name %}{{ user.first_name }}{% else %}{% trans 'Não informado' %}{% endif %}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info-label">
                    <i class="fas fa-user-circle"></i> {% trans "Sobrenome" %}
                  </div>
                  <div class="info-value {% if not user.last_name %}empty{% endif %}">
                    {% if user.last_name %}{{ user.last_name }}{% else %}{% trans 'Não informado' %}{% endif %}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info-label">
                    <i class="fas fa-id-card"></i> {% trans "CPF" %}
                  </div>
                  <div class="info-value {% if not user.cpf %}empty{% endif %}">
                    {% if user.cpf %}{{ user.cpf }}{% else %}{% trans 'Não informado' %}{% endif %}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info-label">
                    <i class="fas fa-venus-mars"></i> {% trans "Gênero" %}
                  </div>
                  <div class="info-value {% if not user.gender %}empty{% endif %}">
                    {% if user.gender %}
                      {% if user.gender == 'male' %}{% trans 'Masculino' %}
                      {% elif user.gender == 'female' %}{% trans 'Feminino' %}
                      {% elif user.gender == 'non_binary' %}{% trans 'Não Binário' %}
                      {% else %}{% trans 'Prefiro não dizer' %}
                      {% endif %}
                    {% else %}
                      {% trans 'Não informado' %}
                    {% endif %}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info-label">
                    <i class="fas fa-globe"></i> {% trans "Website" %}
                  </div>
                  <div class="info-value {% if not user.website %}empty{% endif %}">
                    {% if user.website %}
                      <a href="{{ user.website }}" target="_blank" class="text-decoration-none">
                        {{ user.website }}
                        <i class="fas fa-external-link-alt ms-1"></i>
                      </a>
                    {% else %}
                      {% trans 'Não informado' %}
                    {% endif %}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info-label">
                    <i class="fas fa-map-marker-alt"></i> {% trans "Endereço" %}
                  </div>
                  <div class="info-value {% if not user.addresses.exists %}empty{% endif %}">
                    {% if user.addresses.exists %}
                      {{ user.addresses.first }}
                    {% else %}
                      {% trans 'Não informado' %}
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>

            <!-- Conta Desvinculada Warning -->
            {% if not account_is_linked and original_email_master_owner and original_email_master_owner.username != user.username %}
              <div class="info-section">
                <div class="alert alert-info" style="background: rgba(13, 202, 240, 0.2); border: 1px solid rgba(13, 202, 240, 0.5); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem;">
                  <h6 style="color: #000000; font-weight: 600; margin-bottom: 0.75rem;">
                    <i class="fas fa-info-circle me-2" style="color: #000000;"></i>{% trans "Conta Desvinculada" %}
                  </h6>
                  <p class="mb-0 mt-2" style="font-size: 0.9rem; color: #000000;">
                    {% blocktrans with master=original_email_master_owner.username email=user.email %}
                    Esta conta foi desvinculada do sistema. Embora o e-mail <strong style="color: #000000;">{{ email }}</strong> seja gerenciado pela conta mestre <strong style="color: #000000;">{{ master }}</strong>, esta conta do Lineage não está mais vinculada a nenhum usuário.
                    {% endblocktrans %}
                  </p>
                  <p class="mb-0 mt-2" style="font-size: 0.85rem; opacity: 0.9; color: #000000;">
                    {% trans "Para vincular novamente," %} <a href="{% url 'server:link_lineage_account' %}" class="text-decoration-underline" style="color: #0dcaf0;">{% trans "acesse a página de vinculação de contas" %}</a>.
                  </p>
                </div>
              </div>
            {% endif %}

            <!-- Email Master Owner Warning -->
            {% if account_is_linked and not is_email_master_owner and email_master_owner %}
              <div class="info-section">
                <div class="alert alert-warning" style="background: linear-gradient(135deg, #fff3cd, #ffeaa7); border: 2px solid #ffc107; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem;">
                  <h6 style="color: #856404; font-weight: 600; margin-bottom: 0.75rem;">
                    <i class="fas fa-exclamation-triangle me-2"></i>{% trans "Conta Associada a Conta Mestre" %}
                  </h6>
                  <p style="color: #856404; font-size: 0.95rem; margin-bottom: 0.5rem; font-weight: 500;">
                    {% trans "Esta conta está associada à Conta Mestre" %} <strong>{{ email_master_owner.username }}</strong>.
                  </p>
                  <p style="color: #856404; font-size: 0.9rem; margin-bottom: 0.5rem;">
                    {% trans "O e-mail" %} <strong>{{ user.email }}</strong> {% trans "foi verificado primeiro pela conta" %} <strong>{{ email_master_owner.username }}</strong>, 
                    {% trans "que se tornou a Conta Mestre deste e-mail." %}
                  </p>
                  <ul style="margin-bottom: 0; padding-left: 1.5rem; color: #856404; font-size: 0.85rem;">
                    <li>{% trans "A Conta Mestre pode delegar acesso de contra mestres para outras contas do Lineage." %}</li>
                    <li>{% trans "Você pode receber acesso a contas do Lineage se a Conta Mestre delegar permissões para você." %}</li>
                    <li>{% trans "Para se tornar a Conta Mestre, você precisaria alterar seu e-mail para um que ainda não tenha uma conta mestre." %}</li>
                  </ul>
                </div>
              </div>
            {% endif %}

            <!-- Email Warning Section -->
            <div class="info-section">
              <div class="alert alert-info" style="background: linear-gradient(135deg, #d1ecf1, #bee5eb); border: 2px solid #0dcaf0; border-radius: 12px; padding: 1.25rem; margin-bottom: 0;">
                <h6 style="color: #055160; font-weight: 600; margin-bottom: 0.75rem;">
                  <i class="fas fa-info-circle me-2"></i>{% trans "Sobre o Sistema de E-mail e Conta Mestre" %}
                </h6>
                <p style="color: #055160; font-size: 0.9rem; margin-bottom: 0.5rem;">
                  {% trans "O e-mail é usado para determinar a 'Conta Mestre' que gerencia múltiplas contas do Lineage:" %}
                </p>
                <ul style="margin-bottom: 0; padding-left: 1.5rem; color: #055160; font-size: 0.85rem;">
                  <li>{% trans "A primeira conta que verificar um e-mail se torna a Conta Mestre desse e-mail." %}</li>
                  <li>{% trans "A Conta Mestre pode delegar acesso de contra mestres para outras contas do Lineage." %}</li>
                  <li>{% trans "Se você alterar seu e-mail, precisará verificá-lo novamente e pode perder ou ganhar o status de mestre dependendo do e-mail escolhido." %}</li>
                  <li>{% trans "Para alterar seu e-mail, acesse a página de edição do perfil." %}</li>
                </ul>
              </div>
            </div>

            <!-- Bio Section -->
            {% if user.bio %}
              <div class="info-section">
                <h4><i class="fas fa-heart"></i> {% trans "Sobre Você" %}</h4>
                <div class="bio-content">
                  {{ user.bio }}
                </div>
              </div>
            {% endif %}

            <!-- Action Buttons -->
            <div class="action-buttons">
              <a href="{% url 'edit_profile' %}" class="btn-elegant btn-primary-elegant">
                <i class="fas fa-edit"></i> {% trans 'Editar Perfil' %}
              </a>
              <a href="{% url 'edit_avatar' %}" class="btn-elegant btn-secondary-elegant">
                <i class="fas fa-camera"></i> {% trans 'Editar Avatar' %}
              </a>
              <a href="{% url 'add_or_edit_address' %}" class="btn-elegant btn-secondary-elegant">
                <i class="fas fa-map-marker-alt"></i>
                {% if user.addresses.exists %}
                  {% trans 'Editar Endereço' %}
                {% else %}
                  {% trans 'Cadastrar Endereço' %}
                {% endif %}
              </a>
              <a href="{% url 'message:friends_list' %}" class="btn-elegant btn-info-elegant">
                <i class="fas fa-users"></i> {% trans 'Ver Amigos' %}
              </a>
            </div>
          </div>
        </div>

        <!-- Status Cards -->
        {% if not user.is_email_verified or not user.is_2fa_enabled %}
          <div class="profile-card">
            <div class="profile-body">
              <h4><i class="fas fa-exclamation-triangle"></i> {% trans "Configurações de Segurança" %}</h4>
              
              {% if not user.is_email_verified %}
                <div class="status-card warning">
                  <div class="status-title">
                    <i class="fas fa-exclamation-triangle"></i>
                    {% trans 'E-mail não verificado' %}
                  </div>
                  <div class="status-description">
                    {% trans 'Seu e-mail ainda não foi verificado. Verifique sua caixa de entrada ou spam.' %}
                  </div>
                  <form method="post" action="{% url 'reenviar_verificacao' %}" class="d-inline">
                    {% csrf_token %}
                    <input type="hidden" name="email" value="{{ user.email }}">
                    <button type="submit" class="btn-elegant btn-warning-elegant">
                      <i class="fas fa-paper-plane"></i> {% trans 'Reenviar Verificação' %}
                    </button>
                  </form>
                </div>
              {% endif %}

              {% if not user.is_2fa_enabled %}
                <div class="status-card info">
                  <div class="status-title">
                    <i class="fas fa-shield-alt"></i>
                    {% trans '2FA Desativado' %}
                  </div>
                  <div class="status-description">
                    {% trans 'A autenticação em duas etapas ainda não está ativada em sua conta.' %}
                  </div>
                  <form method="post" action="{% url 'ativar_2fa' %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn-elegant btn-info-elegant">
                      <i class="fas fa-lock"></i> {% trans 'Ativar 2FA' %}
                    </button>
                  </form>
                </div>
              {% endif %}
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.7/dist/inputmask.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var cpfField = document.getElementById('cpf');
    if (cpfField) {
      var im = new Inputmask('999.999.999-99');
      im.mask(cpfField);
    }
  });
</script>
{% endblock content %}