<!DOCTYPE html>
<html lang="en">

<head>
  {% load static %}
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resume Builder | Home</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      background: #f9f9f9;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* Navbar */
    .navbar {
      background: linear-gradient(90deg, #1e1e2f, #121212);
    }

    .navbar-brand {
      font-size: 1.8rem;
      letter-spacing: 1px;
    }

    .nav-link {
      transition: 0.3s ease;
    }

    .nav-link:hover {
      color: #ffc107 !important;
      transform: translateY(-2px);
    }

    /* Heading */
    .demo-heading {
      font-size: 2rem;
      font-weight: 700;
      margin: 40px 0 20px;
      text-align: center;
    }

    /* Resume Cards */
    .resume-card {
      border: 2px solid #eee;
      border-radius: 12px;
      background: white;
      padding: 15px;
      transition: transform 0.3s, box-shadow 0.3s;
      text-align: center;
    }

    .resume-card img {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 15px;
      height: 350px;
      object-fit: cover;
    }

    .resume-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .btn-preview {
      background: #ffca2c;
      border: none;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: 30px;
    }

    /* CTA Button */
    .view-all-btn {
      display: block;
      margin: 30px auto;
      padding: 14px 40px;
      font-size: 1.2rem;
      font-weight: bold;
      border-radius: 30px;
    }

    /* Create Resume Section */
    .create-section {
      background: #fff;
      padding: 60px 20px;
      text-align: center;
    }

    .create-section h2 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 15px;
    }

    .btn-create {
      background: #007bff;
      color: white;
      padding: 14px 40px;
      border-radius: 30px;
      font-size: 1.2rem;
      font-weight: 600;
    }

    .btn-create:hover {
      background: #0056b3;
    }

    /* Footer */
    footer {
      background: #121212;
      color: #bbb;
      padding: 15px 0;
      font-size: 0.95rem;
    }
  </style>
</head>

<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top shadow">
    <div class="container">
      <a class="navbar-brand fw-bold text-warning" href="{% url 'demo' %}">ResumeBuilder</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/' %}active{% endif %}" href="{% url 'demo' %}">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/resume/create/' %}active{% endif %}"
              href="{% url 'resume_create' %}">Create Resume</a>
          </li>
          <li class="nav-item">
            <a class="nav-link {% if request.path == '/resume/list/' %}active{% endif %}"
              href="{% url 'resume_list' %}">Templates</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-danger fw-bold" href="{% url 'logout' %}">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <body class="bg-light">

    <div class="container my-5">
      <h2 class="mb-4 text-center">Create Your Resume</h2>

      <form method="POST" action="">
        {% csrf_token %}

        <!-- Resume Title -->
        <div class="card mb-4">
          <div class="card-header bg-dark text-white">Resume Details</div>
          <div class="card-body">
            <div class="mb-3">
              <label class="form-label">Resume Title</label>
              <input type="text" name="title" class="form-control" placeholder="My Resume" required>
            </div>
            <div class="mb-3">
              <label class="form-label">Summary</label>
              <textarea name="summary" class="form-control" rows="3"></textarea>
            </div>

            <!-- ✅ Template Selection -->
            <!-- Template Selection -->
            <div class="mb-3">
              <label class="form-label d-block fw-bold">Select Resume Template</label>

              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="template_choice" value="template1">
                <label class="form-check-label">Template 1</label>
              </div>

              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="template_choice" value="template2">
                <label class="form-check-label">Template 2</label>
              </div>

              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="template_choice" value="template3">
                <label class="form-check-label">Template 3</label>
              </div>
            </div>



          </div>
        </div>

        <!-- Personal Information -->
        <div class="card mb-4">
          <div class="card-header bg-primary text-white">Personal Information</div>
          <div class="card-body row g-3">
            <div class="col-md-6">
              <label class="form-label">Full Name</label>
              <input type="text" name="full_name" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Email</label>
              <input type="email" name="email" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Phone</label>
              <input type="text" name="phone" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Address</label>
              <input type="text" name="address" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">LinkedIn</label>
              <input type="url" name="linkedin" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">GitHub</label>
              <input type="url" name="github" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Portfolio</label>
              <input type="url" name="portfolio" class="form-control">
            </div>
            <div class="col-md-3">
              <label class="form-label">Date of Birth</label>
              <input type="date" name="dob" class="form-control">
            </div>
            <div class="col-md-3">
              <label class="form-label">Nationality</label>
              <input type="text" name="nationality" class="form-control">
            </div>
          </div>
        </div>

        <!-- Education -->
        <div class="card mb-4">
          <div class="card-header bg-success text-white">Education</div>
          <div class="card-body row g-3">
            <div class="col-md-6">
              <label class="form-label">Degree</label>
              <input type="text" name="degree" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Institution</label>
              <input type="text" name="institution" class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">Location</label>
              <input type="text" name="edu_location" class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">Start Year</label>
              <input type="number" name="start_year" class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">End Year</label>
              <input type="number" name="end_year" class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">Grade/CGPA</label>
              <input type="text" name="grade" class="form-control">
            </div>
          </div>
        </div>

        <!-- Work Experience -->
        <div class="card mb-4">
          <div class="card-header bg-warning text-dark">Work Experience</div>
          <div class="card-body row g-3">
            <div class="col-md-6">
              <label class="form-label">Job Title</label>
              <input type="text" name="job_title" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Company</label>
              <input type="text" name="company" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Location</label>
              <input type="text" name="exp_location" class="form-control">
            </div>
            <div class="col-md-3">
              <label class="form-label">Start Date</label>
              <input type="date" name="start_date" class="form-control">
            </div>
            <div class="col-md-3">
              <label class="form-label">End Date</label>
              <input type="date" name="end_date" class="form-control">
            </div>
            <div class="col-12">
              <label class="form-label">Responsibilities</label>
              <textarea name="responsibilities" class="form-control" rows="3"></textarea>
            </div>
          </div>
        </div>

        <!-- Projects -->
        <div class="card mb-4">
          <div class="card-header bg-info text-dark">Projects</div>
          <div class="card-body row g-3">
            <div class="col-md-6">
              <label class="form-label">Project Title</label>
              <input type="text" name="project_title" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Organization</label>
              <input type="text" name="organization" class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">Duration</label>
              <input type="text" name="duration" class="form-control">
            </div>
            <div class="col-12">
              <label class="form-label">Description</label>
              <textarea name="description" class="form-control" rows="3"></textarea>
            </div>
            <div class="col-12">
              <label class="form-label">Technologies</label>
              <input type="text" name="technologies" class="form-control">
            </div>
          </div>
        </div>

        <!-- Skills -->
        <div class="card mb-4">
          <div class="card-header bg-secondary text-white">Skills</div>
          <div class="card-body">
            <div id="skills-container">
              {% for skill in skills %}
              <div class="row g-3 mb-2 skill-row">
                <div class="col-md-4">
                  <label class="form-label">Category</label>
                  <select name="category[]" class="form-select">
                    <option value="technical" {% if skill.category == "technical" %}selected{% endif %}>Technical</option>
                    <option value="soft" {% if skill.category == "soft" %}selected{% endif %}>Soft Skill</option>
                    <option value="language" {% if skill.category == "language" %}selected{% endif %}>Language</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <label class="form-label">Skill Name</label>
                  <input type="text" name="skill_name[]" class="form-control" value="{{ skill.name }}">
                </div>
                <div class="col-md-2">
                  <button type="button" class="btn btn-danger remove-skill mt-4">Remove</button>
                </div>
              </div>
              {% endfor %}
            </div>
            <button type="button" id="add-skill" class="btn btn-primary mt-2">+ Add Skill</button>
          </div>
        </div>

        <!-- Certifications -->
        <div class="card mb-4">
          <div class="card-header bg-dark text-white">Certifications</div>
          <div class="card-body row g-3">
            <div class="col-md-6">
              <label class="form-label">Certification Name</label>
              <input type="text" name="cert_name" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Issued By</label>
              <input type="text" name="issued_by" class="form-control">
            </div>
            <div class="col-md-4">
              <label class="form-label">Year</label>
              <input type="number" name="year" class="form-control">
            </div>
          </div>
        </div>

        <!-- Achievements -->
        <div class="card mb-4">
          <div class="card-header bg-success text-white">Achievements</div>
          <div class="card-body row g-3">
            <div class="col-md-6">
              <label class="form-label">Title</label>
              <input type="text" name="ach_title" class="form-control">
            </div>
            <div class="col-12">
              <label class="form-label">Description</label>
              <textarea name="ach_description" class="form-control" rows="2"></textarea>
            </div>
          </div>
        </div>

        <!-- Extracurricular -->
        <div class="card mb-4">
          <div class="card-header bg-warning">Extracurricular Activities</div>
          <div class="card-body row g-3">
            <div class="col-md-6">
              <label class="form-label">Activity</label>
              <input type="text" name="activity" class="form-control">
            </div>
            <div class="col-12">
              <label class="form-label">Description</label>
              <textarea name="activity_desc" class="form-control" rows="2"></textarea>
            </div>
          </div>
        </div>

        <!-- References -->
        <div class="card mb-4">
          <div class="card-header bg-primary text-white">References</div>
          <div class="card-body row g-3">
            <div class="col-md-6">
              <label class="form-label">Name</label>
              <input type="text" name="ref_name" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Designation</label>
              <input type="text" name="designation" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Company</label>
              <input type="text" name="ref_company" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Contact</label>
              <input type="text" name="contact" class="form-control">
            </div>
          </div>
        </div>

        <!-- Submit -->
        <div class="text-center">
          <button type="submit" class="btn btn-lg btn-success px-5">Save Resume</button>
        </div>
      </form>
    </div>

  </body>

</html>

<script>
document.getElementById('add-skill').addEventListener('click', function(){
  const container = document.getElementById('skills-container');
  const newRow = document.createElement('div');
  newRow.classList.add('row', 'g-3', 'mb-2', 'skill-row');
  newRow.innerHTML = `
    <div class="col-md-4">
      <label class="form-label">Category</label>
      <select name="category[]" class="form-select">
        <option value="technical">Technical</option>
        <option value="soft">Soft Skill</option>
        <option value="language">Language</option>
      </select>
    </div>
    <div class="col-md-6">
      <label class="form-label">Skill Name</label>
      <input type="text" name="skill_name[]" class="form-control" placeholder="Skill Name">
    </div>
    <div class="col-md-2">
      <button type="button" class="btn btn-danger remove-skill mt-4">Remove</button>
    </div>  
  `;
  container.appendChild(newRow);
});

// Remove skill row dynamically
document.addEventListener('click', function(e){
  if(e.target.classList.contains('remove-skill')){
    e.target.closest('.skill-row').remove();
  }
});
</script>