<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ resume.title }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        @page {
            size: A4;
            margin: 20mm;
        }

        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: #f0f0f0;
            color: #333;
        }

        .resume-page {
            max-width: 800px;
            margin: 40px auto;
            background: #fff;
            padding: 40px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            border-radius: 10px;
        }

        .section {
            margin-bottom: 30px;
        }

        .section h2 {
            font-size: 20px;
            border-left: 5px solid #007bff;
            padding-left: 10px;
            margin-bottom: 15px;
            color: #007bff;
        }

        .section ul {
            padding-left: 20px;
        }

        .badge-skill {
            background: #007bff;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            margin: 3px;
            display: inline-block;
            font-size: 0.85rem;
        }

        .header {
            text-align: center;
            border-bottom: 2px solid #007bff;
            padding-bottom: 15px;
            margin-bottom: 30px;
        }

        .header h1 {
            margin-bottom: 5px;
            font-size: 32px;
        }

        .contact-links a {
            margin: 0 5px;
            color: #007bff;
            font-size: 0.95rem;
        }

        .contact-links a:hover {
            text-decoration: underline;
        }

        .small-info {
            font-size: 0.9rem;
            color: #555;
        }

        li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="resume-page">

    <!-- Header -->
    {% if personal_info %}
    <div class="header">
        <h1>{{ personal_info.full_name }}</h1>
        <div class="small-info">
            {{ personal_info.email }} | {{ personal_info.phone }}<br>
            {{ personal_info.address }}
        </div>
        <div class="contact-links mt-2">
            {% if personal_info.linkedin %}<a href="{{ personal_info.linkedin }}" target="_blank">LinkedIn</a>{% endif %}
            {% if personal_info.github %}<a href="{{ personal_info.github }}" target="_blank">GitHub</a>{% endif %}
            {% if personal_info.portfolio %}<a href="{{ personal_info.portfolio }}" target="_blank">Portfolio</a>{% endif %}
        </div>
        {% if personal_info.dob or personal_info.nationality %}
        <div class="small-info mt-2">
            {% if personal_info.dob %}DOB: {{ personal_info.dob }}{% endif %}
            {% if personal_info.nationality %} | Nationality: {{ personal_info.nationality }}{% endif %}
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Summary -->
    {% if resume.summary %}
    <div class="section">
        <h2>Summary</h2>
        <p>{{ resume.summary }}</p>
    </div>
    {% endif %}

    <!-- Education -->
    {% if education %}
    <div class="section">
        <h2>Education</h2>
        <ul class="list-unstyled">
            {% for edu in education %}
            <li>
                <strong>{{ edu.degree }}</strong>, {{ edu.institution }}<br>
                {{ edu.start_year }} - {{ edu.end_year|default:"Present" }}{% if edu.location %} | {{ edu.location }}{% endif %}<br>
                {% if edu.grade %}Grade: {{ edu.grade }}{% endif %}
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

    <!-- Experience -->
    {% if experience %}
    <div class="section">
        <h2>Work Experience</h2>
        <ul class="list-unstyled">
            {% for exp in experience %}
            <li>
                <strong>{{ exp.job_title }}</strong> at {{ exp.company }}<br>
                {{ exp.start_date }} - {{ exp.end_date|default:"Present" }}{% if exp.location %} | {{ exp.location }}{% endif %}<br>
                {{ exp.responsibilities }}
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

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

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

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

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

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

    <!-- References -->
    {% if references %}
    <div class="section">
        <h2>References</h2>
        <ul>
            {% for ref in references %}
            <li>{{ ref.name }} - {{ ref.designation }} at {{ ref.company }}{% if ref.contact %} | Contact: {{ ref.contact }}{% endif %}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

</div>

</body>
</html>
