<!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 {
            background: #f8f9fa;
            font-family: 'Segoe UI', sans-serif;
            color: #212529;
        }

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

        .section {
            margin-bottom: 30px;
        }

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

        .section p,
        .section li {
            font-size: 14px;
        }

        .badge-skill {
            margin: 2px;
        }

        .contact-info p {
            margin-bottom: 5px;
        }

        .header {
            border-bottom: 2px solid #007bff;
            margin-bottom: 30px;
            padding-bottom: 10px;
        }

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

        .header .subtitle {
            font-size: 16px;
            color: #6c757d;
        }
    </style>
</head>
<body>

<div class="resume">

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

    <!-- Summary -->
    {% if resume.summary %}
    <div class="section">
        <h2>Professional 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 }} | {{ edu.location }}<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 job in experience %}
            <li>
                <strong>{{ job.job_title }}</strong> at {{ job.company }}<br>
                {{ job.start_date }} - {{ job.end_date|default:"Present" }} | {{ job.location }}<br>
                {{ job.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 bg-primary badge-skill">{{ skill.name }} <small>({{ skill.category }})</small></span>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Certifications -->
    {% if certifications %}
    <div class="section">
        <h2>Certifications</h2>
        <ul class="list-unstyled">
            {% 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 class="list-unstyled">
            {% 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 class="list-unstyled">
            {% 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 class="list-unstyled">
            {% for ref in references %}
            <li>{{ ref.name }} - {{ ref.designation }}, {{ ref.company }}{% if ref.contact %} | Contact: {{ ref.contact }}{% endif %}</li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

</div>

</body>
</html>
