{% extends 'base.html' %}

{% block title %}My Missions - PixelMinds{% endblock %}

{% block content %}
<section class="section">
  <div class="container">
    <div class="row mb-4 align-items-center">
      <div class="col-md-8">
        <h1 class="section-title mb-0">My Missions</h1>
        <p class="lead">Create and manage your personal missions.</p>
      </div>
      <div class="col-md-4 text-md-end">
        <a href="{% url 'core:mission_create' %}" class="btn btn-primary">+ Create a New Mission</a>
      </div>
    </div>

    {% if missions %}
      <div class="list-group">
        {% for mission in missions %}
          <div class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">
                <a href="{% url 'core:mission_detail' mission.pk %}">{{ mission.title }}</a>
              </h5>
              <small>{{ mission.created_at|date:"d M Y" }}</small>
            </div>
            <p class="mb-1">{{ mission.description|truncatechars:150 }}</p>
            <div class="mt-3">
              <a href="{% url 'core:mission_update' mission.pk %}" class="btn btn-sm btn-outline-primary me-2">Edit</a>
              <a href="{% url 'core:mission_delete' mission.pk %}" class="btn btn-sm btn-outline-danger">Delete</a>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="text-center p-5">
        <p class="lead">You haven't created any missions yet.</p>
        <p class="text-muted">Get started by creating your first mission.</p>
      </div>
    {% endif %}
  </div>
</section>
{% endblock %}
