{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resume List</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', sans-serif; }
    .resume-card { border-radius: 12px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
    .resume-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
    .resume-header { background: linear-gradient(90deg, #007bff, #00c6ff); color: white; padding: 15px; }
    .resume-body { padding: 20px; }
    .resume-footer { background: #f8f9fa; padding: 10px 15px; text-align: right; }
    .badge-skill { margin: 2px; }
  </style>
</head>
<body>

<div class="container my-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">📄 My Resumes</h2>
    <a href="{% url 'resume_create' %}" class="btn btn-success">+ Create Resume</a>
  </div>

  {% if resumes %}
  <div class="row g-4">
    {% for resume in resumes %}
    <div class="col-md-6">
      <div class="card shadow resume-card">
        <!-- Header -->
        <div class="resume-header">
          <h4 class="mb-0">{{ resume.title }}</h4>
          <small>Created: {{ resume.created_at|date:"M d, Y" }}</small>
        </div>

        <!-- Body -->
        <div class="resume-body">
          <p class="text-muted"><em>{{ resume.summary|truncatewords:25 }}</em></p>

          {% if resume.personal_info %}
          <h6 class="fw-bold mt-3">👤 Personal Info</h6>
          <ul class="list-unstyled small">
            <li><strong>Name:</strong> {{ resume.personal_info.full_name }}</li>
            <li><strong>Email:</strong> {{ resume.personal_info.email }}</li>
            <li><strong>Phone:</strong> {{ resume.personal_info.phone }}</li>
          </ul>
          {% endif %}

          {% if resume.skills.all %}
          <h6 class="fw-bold mt-3">⚡ Skills</h6>
          {% for skill in resume.skills.all %}
            <span class="badge bg-primary badge-skill">{{ skill.name }}</span>
          {% endfor %}
          {% endif %}
        </div>

        <!-- Footer -->
        <div class="resume-footer">
          <a href="{% url 'resume_detail' resume.id %}" class="btn btn-sm btn-outline-primary">View</a>
          <a href="{% url 'resume_edit' resume.id %}" class="btn btn-sm btn-outline-warning">Edit</a>
          <a href="{% url 'resume_delete' resume.id %}" class="btn btn-sm btn-outline-danger">Delete</a>
          <a href="{% url 'resume_download' resume.id %}" class="btn btn-sm btn-outline-success">Download</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
    <div class="alert alert-info text-center">No resumes found. Start by creating one!</div>
  {% endif %}
</div>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
