{% extends 'home/base.html' %}
{% load humanize %}

{% block title %}{% if show_full_seeker_details %}{{ profile.full_name }}{% else %}{{ profile.headline|default:profile.category }}{% endif %} – Candidate Profile | PEZAJOB{% endblock %}

{% block extra_css %}
<style>
  .cand-cover { height: 260px; position: relative; overflow: hidden; margin-top: 70px; }
  .cand-cover img { width: 100%; height: 100%; object-fit: cover; }
  .cand-cover-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(44,62,80,0.2), rgba(44,62,80,0.65)); }
  .cand-hero { background: var(--white); border-bottom: 1px solid var(--border); }
  .cand-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .cand-info-bar { display: flex; align-items: flex-end; gap: 24px; padding: 0 0 24px; margin-top: -52px; position: relative; z-index: 10; flex-wrap: wrap; }
  .cand-avatar-large { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid var(--white); box-shadow: 0 8px 32px rgba(0,0,0,0.2); flex-shrink: 0; }
  .cand-info-main { flex: 1; min-width: 200px; padding-top: 56px; }
  .cand-info-main h1 { font-size: 1.6rem; color: var(--primary); margin-bottom: 4px; }
  .cand-meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
  .cand-meta-row span { font-size: 0.83rem; color: var(--text-light); display: flex; align-items: center; gap: 5px; }
  .cand-meta-row i { color: var(--secondary); }
  .cand-actions { display: flex; gap: 10px; padding-top: 56px; flex-wrap: wrap; }
  .cand-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; padding: 40px 0 60px; }
  .section-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 20px; }
  .section-card h2 { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--bg); display: flex; align-items: center; gap: 10px; }
  .section-card h2 i { color: var(--secondary); }
  .skills-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
  .skill-bubble { background: var(--bg); border: 1.5px solid var(--border); color: var(--primary); font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; }
  .sidebar-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
  .sidebar-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--bg); }
  .info-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
  .info-row i { color: var(--secondary); min-width: 16px; }
  .info-row span { font-size: 0.84rem; color: var(--text-light); }
  .similar-cand { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bg); text-decoration: none; color: inherit; }
  .similar-cand:last-child { border-bottom: none; }
  .sim-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
  .sim-name { font-size: 0.85rem; font-weight: 600; color: var(--primary); }
  .sim-role { font-size: 0.75rem; color: var(--text-muted); }
  .privacy-notice { background: rgba(209,207,10,0.12); border: 1px solid rgba(209,207,10,0.35); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 24px; }
  .privacy-notice p { margin: 0; font-size: 0.9rem; color: var(--text-light); line-height: 1.6; }
  @media(max-width:1000px){ .cand-layout{grid-template-columns:1fr} }
  .pp-timeline { display: flex; flex-direction: column; gap: 18px; }
  .pp-entry { padding-left: 18px; border-left: 3px solid var(--secondary); }
  .pp-entry h3 { margin: 0 0 2px; font-size: 1rem; color: var(--primary); }
  .pp-sub { font-size: .86rem; color: var(--text-light); }
  .pp-period { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
  .pp-text { margin: 8px 0 0; font-size: .88rem; color: var(--text-light); line-height: 1.75; }
  .pp-label { margin: 16px 0 8px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .pp-link { display: inline-block; margin-top: 8px; font-size: .84rem; font-weight: 700; color: var(--secondary); }
  .pp-links { display: flex; flex-wrap: wrap; gap: 10px; }
  .pp-links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: var(--primary); color: #fff; font-size: .84rem; font-weight: 700; text-decoration: none; }
  .pp-links a i { color: var(--secondary); }
</style>
{% endblock %}

{% block content %}
<div class="cand-cover"{% if not show_full_seeker_details or not profile.display_cover_url %} style="background:linear-gradient(135deg,var(--primary),var(--primary-light));"{% endif %}>
  {% if show_full_seeker_details and profile.display_cover_url %}
  <img loading="lazy" decoding="async" src="{{ profile.display_cover_url }}" alt="{{ profile.full_name }}" />
  {% endif %}
  <div class="cand-cover-overlay"></div>
</div>

<div class="cand-hero">
  <div class="cand-hero-inner">
    <div class="cand-info-bar">
      {% if show_full_seeker_details %}
        {% if profile.display_avatar_url %}
        <img loading="lazy" decoding="async" src="{{ profile.display_avatar_url }}" alt="{{ profile.full_name }}" class="cand-avatar-large" />
        {% else %}
        <div class="cand-avatar-large" style="background:var(--primary);color:var(--secondary);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;">{{ profile.initials }}</div>
        {% endif %}
      {% else %}
        <div class="cand-avatar-large" style="background:var(--primary);color:var(--secondary);display:flex;align-items:center;justify-content:center;font-size:2rem;">
          <i class="fas fa-user-tie"></i>
        </div>
      {% endif %}
      <div class="cand-info-main">
        {% if show_full_seeker_details %}
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
          <h1>{{ profile.full_name }}</h1>
          {% if profile.tier == 'gold' %}
          <span style="background:linear-gradient(135deg,#d1cf0a,#b8b608);color:var(--primary);font-size:0.7rem;font-weight:700;padding:3px 10px;border-radius:20px;"><i class="fas fa-crown"></i> GOLD</span>
          {% endif %}
          <span style="background:rgba(39,174,96,0.1);color:#27ae60;font-size:0.75rem;font-weight:700;padding:3px 10px;border-radius:20px;">{{ profile.get_availability_display }}</span>
        </div>
        <div class="cand-meta-row">
          <span><i class="fas fa-briefcase"></i> {{ profile.headline }}</span>
          <span><i class="fas fa-map-marker-alt"></i> {{ profile.location }}, Zambia</span>
          <span><i class="fas fa-clock"></i> {{ profile.years_experience }} Years Experience</span>
          {% if profile.qualification %}
          <span><i class="fas fa-graduation-cap"></i> {{ profile.qualification }}</span>
          {% endif %}
        </div>
        <div style="font-size:0.83rem;color:var(--text-muted)">Expected Salary: <strong style="color:var(--primary)">{{ profile.salary_display }}</strong> · Updated {{ profile.updated_at|naturaltime }}</div>
        {% else %}
        <h1>{{ profile.headline|default:profile.category }}</h1>
        <div class="cand-meta-row">
          <span><i class="fas fa-industry"></i> {{ profile.category }}</span>
        </div>
        {% endif %}
      </div>
      <div class="cand-actions">
        {% if user.is_authenticated and profile.user_id == user.id %}
        <a href="{% url 'seekers:edit_profile' %}" class="btn btn-primary"><i class="fas fa-pen"></i> Edit profile</a>
        {% endif %}
        {% if show_full_seeker_details %}
          {% if profile_access.show_contact %}
            {% if user.is_authenticated %}
            <button type="button" class="btn btn-primary" id="profileContactBtn" data-contact-trigger
              data-contact-name="{{ profile.full_name }}"
              data-contact-phone="{{ profile.contact_phone }}"
              data-contact-email="{{ profile.contact_email }}"
              {% if can_message_seeker %}data-contact-message="{{ message_start_url }}"{% endif %}>
              <i class="fas fa-envelope"></i> Contact
            </button>
            {% else %}
            <a href="{% url 'accounts:login' %}?next={{ request.path|urlencode }}%23contact" class="btn btn-primary"><i class="fas fa-envelope"></i> Contact</a>
            {% endif %}
          {% endif %}
          {% if profile.cv_file %}
            {% if can_view_cv %}
            <a href="{% url 'seekers:view_cv' slug=profile.slug %}" class="btn btn-primary"><i class="fas fa-file-alt"></i> View CV</a>
            {% endif %}
            {% if can_download_cv %}
            <a href="{% url 'seekers:download_cv' slug=profile.slug %}" class="btn btn-outline"><i class="fas fa-download"></i> Download CV</a>
            {% elif user.is_authenticated and user.is_company %}
            <a href="{% url 'subscriptions:pricing' %}" class="btn btn-outline"><i class="fas fa-download"></i> Upgrade to download CV</a>
            {% endif %}
          {% endif %}
        {% elif user.is_authenticated and user.is_company %}
        <a href="{% url 'subscriptions:pricing' %}" class="btn btn-primary"><i class="fas fa-unlock"></i> Subscribe to view full profile</a>
        {% elif not user.is_authenticated %}
        <a href="{% url 'accounts:login' %}?next={{ request.path|urlencode }}" class="btn btn-primary"><i class="fas fa-sign-in-alt"></i> Employer sign in</a>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<section style="background:var(--bg)">
  <div class="container">
    {% if not show_full_seeker_details %}
    <div class="privacy-notice" style="margin-top:32px;">
      <p>
        <i class="fas fa-shield-alt" style="color:var(--secondary);margin-right:8px;"></i>
        {{ profile_access.message|default:"Only the profession is shown here. Full candidate details and CV access are available to subscribed employers." }}
      </p>
    </div>
    {% endif %}

    <div class="cand-layout">
      <div>
        {% if show_full_seeker_details %}
          {% if profile.bio %}
          <div class="section-card">
            <h2><i class="fas fa-user"></i> About Me</h2>
            <p style="font-size:0.92rem;color:var(--text-light);line-height:1.85;">{{ profile.bio|linebreaksbr }}</p>
          </div>
          {% endif %}

          {% if profile.skill_list %}
          <div class="section-card">
            <h2><i class="fas fa-code"></i> Skills</h2>
            <div class="skills-cloud">
              {% for skill in profile.skill_list %}
              <span class="skill-bubble">{{ skill }}</span>
              {% endfor %}
            </div>
          </div>
          {% endif %}

          {% if profile.experience_summary and not profile.experiences.exists %}
          <div class="section-card">
            <h2><i class="fas fa-briefcase"></i> Experience</h2>
            <p style="font-size:0.92rem;color:var(--text-light);line-height:1.85;">{{ profile.experience_summary|linebreaksbr }}</p>
          </div>
          {% endif %}

          {% if profile.education and not profile.education_items.exists %}
          <div class="section-card">
            <h2><i class="fas fa-graduation-cap"></i> Education</h2>
            <p style="font-size:0.92rem;color:var(--text-light);line-height:1.85;">{{ profile.education|linebreaksbr }}</p>
          </div>
          {% endif %}
          {% include 'seekers/partials/professional_sections.html' %}
        {% else %}
          <div class="section-card">
            <h2><i class="fas fa-briefcase"></i> Profession</h2>
            <p style="font-size:0.92rem;color:var(--text-light);line-height:1.85;">
              <strong>{{ profile.headline|default:profile.category }}</strong>
              {% if profile.category and profile.headline %}<br><span style="color:var(--text-muted)">Category: {{ profile.category }}</span>{% endif %}
            </p>
          </div>
        {% endif %}
      </div>

      <div>
        <div class="sidebar-card">
          <h3>{% if show_full_seeker_details %}Profile Summary{% else %}Profession{% endif %}</h3>
          <div class="info-row"><i class="fas fa-industry"></i><span>{{ profile.category }}</span></div>
          {% if show_full_seeker_details %}
          <div class="info-row"><i class="fas fa-map-marker-alt"></i><span>{{ profile.location }}</span></div>
          <div class="info-row"><i class="fas fa-layer-group"></i><span>{{ profile.get_experience_level_display }}</span></div>
          <div class="info-row"><i class="fas fa-money-bill-wave"></i><span>{{ profile.salary_display }}</span></div>
          {% else %}
          <div class="info-row"><i class="fas fa-briefcase"></i><span>{{ profile.headline|default:"Professional" }}</span></div>
          {% endif %}
        </div>

        {% if similar_seekers %}
        <div class="sidebar-card">
          <h3>Similar Candidates</h3>
          {% for similar in similar_seekers %}
          <a href="{{ similar.get_absolute_url }}" class="similar-cand">
            {% if show_full_seeker_details %}
              {% if similar.avatar_url %}
              <img src="{{ similar.avatar_url }}" alt="{{ similar.full_name }}" class="sim-avatar" />
              {% else %}
              <div class="sim-avatar" style="background:var(--primary);color:var(--secondary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.75rem;">{{ similar.initials }}</div>
              {% endif %}
              <div>
                <div class="sim-name">{{ similar.full_name }}</div>
                <div class="sim-role">{{ similar.headline }}</div>
              </div>
            {% else %}
              <div class="sim-avatar" style="background:var(--primary);color:var(--secondary);display:flex;align-items:center;justify-content:center;font-size:0.75rem;"><i class="fas fa-user-tie"></i></div>
              <div>
                <div class="sim-name">{{ similar.headline|default:similar.category }}</div>
                <div class="sim-role">{{ similar.category }}</div>
              </div>
            {% endif %}
          </a>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>
{% if show_full_seeker_details and profile_access.show_contact %}
{% include 'seekers/partials/contact_modal.html' %}
{% endif %}
{% endblock %}