<!DOCTYPE html>
<html lang="en">
<head>
  {% load static %}
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Edit Resume</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
      <a class="navbar-brand 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" href="{% url 'demo' %}">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'resume_create' %}">Create Resume</a></li>
          <li class="nav-item"><a class="nav-link" href="{% url 'resume_list' %}">Templates</a></li>
          <li class="nav-item"><a class="nav-link text-danger" href="{% url 'logout' %}">Logout</a></li>
        </ul>
      </div>
    </div>
  </nav>

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

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

      <!-- Resume Title & Summary & Template -->
      <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" required
                   value="{{ resume.title }}">
          </div>
          <!-- Template Selection -->
          <div class="mb-3">
            <label class="form-label d-block fw-bold">Select Resume Template</label>

            {% for tpl in templates %}
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="template_choice" value="{{ tpl }}"
                      {% if tpl == default_template %}checked{% endif %}>
                <label class="form-check-label">{{ tpl|capfirst }}</label>
              </div>
            {% endfor %}
          </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">
          {% with p=personal_info %}
          <div class="col-md-6">
            <label class="form-label">Full Name</label>
            <input type="text" name="full_name" class="form-control" required
                   value="{{ p.full_name|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Email</label>
            <input type="email" name="email" class="form-control" required
                   value="{{ p.email|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Phone</label>
            <input type="text" name="phone" class="form-control" required
                   value="{{ p.phone|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Address</label>
            <input type="text" name="address" class="form-control"
                   value="{{ p.address|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">LinkedIn</label>
            <input type="url" name="linkedin" class="form-control"
                   value="{{ p.linkedin|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">GitHub</label>
            <input type="url" name="github" class="form-control"
                   value="{{ p.github|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Portfolio</label>
            <input type="url" name="portfolio" class="form-control"
                   value="{{ p.portfolio|default_if_none:'' }}">
          </div>
          <div class="col-md-3">
            <label class="form-label">Date of Birth</label>
            <input type="date" name="dob" class="form-control"
                   value="{{ p.dob|default_if_none:'' }}">
          </div>
          <div class="col-md-3">
            <label class="form-label">Nationality</label>
            <input type="text" name="nationality" class="form-control"
                   value="{{ p.nationality|default_if_none:'' }}">
          </div>
          {% endwith %}
        </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">
          {% with edu=education.first %}
          <div class="col-md-6">
            <label class="form-label">Degree</label>
            <input type="text" name="degree" class="form-control"
                   value="{{ edu.degree|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Institution</label>
            <input type="text" name="institution" class="form-control"
                   value="{{ edu.institution|default_if_none:'' }}">
          </div>
          <div class="col-md-4">
            <label class="form-label">Location</label>
            <input type="text" name="location" class="form-control"
                   value="{{ edu.location|default_if_none:'' }}">
          </div>
          <div class="col-md-4">
            <label class="form-label">Start Year</label>
            <input type="number" name="start_year" class="form-control"
                   value="{{ edu.start_year|default_if_none:'' }}">
          </div>
          <div class="col-md-4">
            <label class="form-label">End Year</label>
            <input type="number" name="end_year" class="form-control"
                   value="{{ edu.end_year|default_if_none:'' }}">
          </div>
          <div class="col-md-4">
            <label class="form-label">Grade/CGPA</label>
            <input type="text" name="grade" class="form-control"
                   value="{{ edu.grade|default_if_none:'' }}">
          </div>
          {% endwith %}
        </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">
          {% with ex=experience.first %}
          <div class="col-md-6">
            <label class="form-label">Job Title</label>
            <input type="text" name="job_title" class="form-control"
                   value="{{ ex.job_title|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Company</label>
            <input type="text" name="company" class="form-control"
                   value="{{ ex.company|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Location</label>
            <input type="text" name="exp_location" class="form-control"
                   value="{{ ex.location|default_if_none:'' }}">
          </div>
          <div class="col-md-3">
            <label class="form-label">Start Date</label>
            <input type="date" name="start_date" class="form-control"
                   value="{{ ex.start_date|default_if_none:'' }}">
          </div>
          <div class="col-md-3">
            <label class="form-label">End Date</label>
            <input type="date" name="end_date" class="form-control"
                   value="{{ ex.end_date|default_if_none:'' }}">
          </div>
          <div class="col-12">
            <label class="form-label">Responsibilities</label>
            <textarea name="responsibilities" class="form-control" rows="3">{{ ex.responsibilities|default_if_none:'' }}</textarea>
          </div>
          {% endwith %}
        </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">
          {% with pr=projects.first %}
          <div class="col-md-6">
            <label class="form-label">Project Title</label>
            <input type="text" name="project_title" class="form-control"
                   value="{{ pr.title|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Organization</label>
            <input type="text" name="organization" class="form-control"
                   value="{{ pr.organization|default_if_none:'' }}">
          </div>
          <div class="col-md-4">
            <label class="form-label">Duration</label>
            <input type="text" name="duration" class="form-control"
                   value="{{ pr.duration|default_if_none:'' }}">
          </div>
          <div class="col-12">
            <label class="form-label">Description</label>
            <textarea name="description" class="form-control" rows="3">{{ pr.description|default_if_none:'' }}</textarea>
          </div>
          <div class="col-12">
            <label class="form-label">Technologies</label>
            <input type="text" name="technologies" class="form-control"
                   value="{{ pr.technologies|default_if_none:'' }}">
          </div>
          {% endwith %}
        </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">
          {% with c=certifications.first %}
          <div class="col-md-6">
            <label class="form-label">Certification Name</label>
            <input type="text" name="cert_name" class="form-control"
                   value="{{ c.name|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Issued By</label>
            <input type="text" name="issued_by" class="form-control"
                   value="{{ c.issued_by|default_if_none:'' }}">
          </div>
          <div class="col-md-4">
            <label class="form-label">Year</label>
            <input type="number" name="year" class="form-control"
                   value="{{ c.year|default_if_none:'' }}">
          </div>
          {% endwith %}
        </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">
          {% with a=achievements.first %}
          <div class="col-md-6">
            <label class="form-label">Title</label>
            <input type="text" name="ach_title" class="form-control"
                   value="{{ a.title|default_if_none:'' }}">
          </div>
          <div class="col-12">
            <label class="form-label">Description</label>
            <textarea name="ach_description" class="form-control" rows="2">{{ a.description|default_if_none:'' }}</textarea>
          </div>
          {% endwith %}
        </div>
      </div>

      <!-- Extracurricular Activities -->
      <div class="card mb-4">
        <div class="card-header bg-warning text-dark">Extracurricular Activities</div>
        <div class="card-body row g-3">
          {% with e=extracurricular.first %}
          <div class="col-md-6">
            <label class="form-label">Activity</label>
            <input type="text" name="activity" class="form-control"
                   value="{{ e.activity|default_if_none:'' }}">
          </div>
          <div class="col-12">
            <label class="form-label">Description</label>
            <textarea name="activity_desc" class="form-control" rows="2">{{ e.description|default_if_none:'' }}</textarea>
          </div>
          {% endwith %}
        </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">
          {% with r=references.first %}
          <div class="col-md-6">
            <label class="form-label">Name</label>
            <input type="text" name="ref_name" class="form-control"
                   value="{{ r.name|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Designation</label>
            <input type="text" name="designation" class="form-control"
                   value="{{ r.designation|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Company</label>
            <input type="text" name="company" class="form-control"
                   value="{{ r.company|default_if_none:'' }}">
          </div>
          <div class="col-md-6">
            <label class="form-label">Contact</label>
            <input type="text" name="contact" class="form-control"
                   value="{{ r.contact|default_if_none:'' }}">
          </div>
          {% endwith %}
        </div>
      </div>

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

  <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);
    });

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

</body>
</html>
