<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ resume.title }}</title>
  <style>
    body {
      font-family: "Segoe UI", Arial, sans-serif;
      margin: 40px auto;
      max-width: 800px;
      background: #f9f9f9;
      color: #333;
      line-height: 1.6;
      padding: 30px;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
    }

    h1 {
      font-size: 32px;
      color: #222;
      margin-bottom: 5px;
    }

    h2 {
      font-size: 20px;
      margin-top: 30px;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 2px solid #007bff;
      color: #007bff;
    }

    h3 {
      font-size: 16px;
      margin: 5px 0;
      color: #444;
    }

    p { margin: 4px 0; }

    .header {
      text-align: center;
      margin-bottom: 20px;
    }

    .header em {
      color: #555;
      font-size: 14px;
    }

    .section {
      margin-top: 20px;
    }

    ul {
      margin: 10px 0;
      padding-left: 20px;
    }

    .sub-item {
      margin-bottom: 10px;
    }

    .skill-badge {
      display: inline-block;
      background: #007bff;
      color: #fff;
      padding: 6px 12px;
      margin: 4px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      transition: background 0.3s ease;
    }

    .skill-badge:hover {
      background: #0056b3;
    }

    .contact-info {
      margin-top: 10px;
      font-size: 14px;
      color: #555;
    }

    .contact-info strong {
      color: #000;
    }

    .highlight {
      font-weight: bold;
      color: #007bff;
    }

    /* Responsive */
    @media print {
      body {
        box-shadow: none;
        margin: 0;
        border: none;
      }
    }
  </style>
</head>
<body>

<!-- Header -->
<div class="header">
  <h1>{{ resume.title }}</h1>
  {% if resume.summary %}
    <em>{{ resume.summary }}</em>
  {% endif %}
</div>

<!-- Personal Info -->
{% if resume.personal_info %}
<div class="section">
  <h2>👤 Personal Info</h2>
  <div class="contact-info">
    <p><strong>Name:</strong> {{ resume.personal_info.full_name }}</p>
    <p><strong>Email:</strong> {{ resume.personal_info.email }}</p>
    <p><strong>Phone:</strong> {{ resume.personal_info.phone }}</p>
    {% if resume.personal_info.address %}<p><strong>Address:</strong> {{ resume.personal_info.address }}</p>{% endif %}
    {% if resume.personal_info.linkedin %}<p><strong>LinkedIn:</strong> {{ resume.personal_info.linkedin }}</p>{% endif %}
    {% if resume.personal_info.github %}<p><strong>GitHub:</strong> {{ resume.personal_info.github }}</p>{% endif %}
    {% if resume.personal_info.portfolio %}<p><strong>Portfolio:</strong> {{ resume.personal_info.portfolio }}</p>{% endif %}
    {% if resume.personal_info.dob %}<p><strong>DOB:</strong> {{ resume.personal_info.dob }}</p>{% endif %}
    {% if resume.personal_info.nationality %}<p><strong>Nationality:</strong> {{ resume.personal_info.nationality }}</p>{% endif %}
  </div>
</div>
{% endif %}

<!-- Education -->
{% if resume.education.all %}
<div class="section">
  <h2>🎓 Education</h2>
  <ul>
    {% for edu in resume.education.all %}
      <li class="sub-item">
        <span class="highlight">{{ edu.degree }}</span> - {{ edu.institution }}
        {% if edu.location %} ({{ edu.location }}){% endif %}
        <br>
        {{ edu.start_year }} - {{ edu.end_year|default:"Present" }}
        {% if edu.grade %}<br><em>Grade:</em> {{ edu.grade }}{% endif %}
      </li>
    {% endfor %}
  </ul>
</div>
{% endif %}

<!-- Experience -->
{% if resume.experience.all %}
<div class="section">
  <h2>💼 Work Experience</h2>
  <ul>
    {% for exp in resume.experience.all %}
      <li class="sub-item">
        <strong>{{ exp.job_title }}</strong>, {{ exp.company }}
        {% if exp.location %} - {{ exp.location }}{% endif %}
        <br>
        <em>{{ exp.start_date }} - {{ exp.end_date|default:"Present" }}</em>
        <br>
        {{ exp.responsibilities }}
      </li>
    {% endfor %}
  </ul>
</div>
{% endif %}

<!-- Projects -->
{% if resume.projects.all %}
<div class="section">
  <h2>📌 Projects</h2>
  <ul>
    {% for project in resume.projects.all %}
      <li class="sub-item">
        <strong>{{ project.title }}</strong>
        {% if project.organization %}- {{ project.organization }}{% endif %}
        {% if project.duration %}<br><em>{{ project.duration }}</em>{% endif %}
        <br>{{ project.description }}
        {% if project.technologies %}
          <br><em>Technologies:</em> {{ project.technologies }}
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>
{% endif %}

<!-- Skills -->
{% if resume.skills.all %}
<div class="section">
  <h2>⚡ Skills</h2>
  {% for skill in resume.skills.all %}
    <span class="skill-badge">{{ skill.name }}</span>
  {% endfor %}
</div>
{% endif %}

<!-- Certifications -->
{% if resume.certifications.all %}
<div class="section">
  <h2>🏅 Certifications</h2>
  <ul>
    {% for cert in resume.certifications.all %}
      <li class="sub-item">{{ cert.name }} - {{ cert.issued_by }} ({{ cert.year }})</li>
    {% endfor %}
  </ul>
</div>
{% endif %}

<!-- Achievements -->
{% if resume.achievements.all %}
<div class="section">
  <h2>🏆 Achievements</h2>
  <ul>
    {% for ach in resume.achievements.all %}
      <li class="sub-item">{{ ach.title }}{% if ach.description %} - {{ ach.description }}{% endif %}</li>
    {% endfor %}
  </ul>
</div>
{% endif %}

<!-- Extracurricular -->
{% if resume.extracurricular.all %}
<div class="section">
  <h2>🎭 Extracurricular Activities</h2>
  <ul>
    {% for extra in resume.extracurricular.all %}
      <li class="sub-item">{{ extra.activity }}{% if extra.description %} - {{ extra.description }}{% endif %}</li>
    {% endfor %}
  </ul>
</div>
{% endif %}

<!-- References -->
{% if resume.references.all %}
<div class="section">
  <h2>📞 References</h2>
  <ul>
    {% for ref in resume.references.all %}
      <li class="sub-item">{{ ref.name }} - {{ ref.designation }} at {{ ref.company }}{% if ref.contact %} ({{ ref.contact }}){% endif %}</li>
    {% endfor %}
  </ul>
</div>
{% endif %}

</body>
</html>
