{% extends 'base.html' %}
{% block title %} HW Checklists {% endblock %}

{% block content %}
<style>
    .container {
        background-color: #fff; /* White background */
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }
    h1 {
        color: #837E9F; /* Soft purple */
    }
    a {
        color: #FF9AA2; /* Pastel red */
    }
    a:hover {
        color: #FFB3BA; /* Lighter pastel red */
        text-decoration: none; /* No underline */
    }
    .btn-primary {
        background-color: #B5EAD7; /* Pastel green */
        border-color: #B5EAD7;
    }
    .btn-primary:hover {
        background-color: #C7CEEA; /* Lighter pastel green */
        border-color: #C7CEEA;
    }
    .btn-danger {
        background-color: #FF6B6B; /* Pastel pink */
        border-color: #FF6B6B;
    }
    .btn-danger:hover {
        background-color: #FF8787; /* Lighter pastel pink */
        border-color: #FF8787;
    }
    .back-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 0;
    background-color: #FF9AA2; /* Pastel red */
    color: white;
    border-radius: 5px;
    text-decoration: none; /* Removes underline from the link */
    text-align: center;
}

.back-button:hover {
    background-color: #F78DA7; /* Lighter shade for hover */
}
</style>
<a href="{% url 'index' %}" class="back-button">Exit App</a>
<div class="container">
    <h1 class="text-center mt-4">HW Checklists</h1>
    <ul class="list-unstyled">
        {% for page in pages %}
        <li class="mb-3">
            <a href="{% url 'view_page' page.id %}" class="text-primary">({{ page.date }})</a>
            <a href="{% url 'delete_page' page.id %}" class="btn btn-danger btn-sm ml-2" onclick="return confirm('Are you sure you want to delete this checklist?');">Delete</a>
        </li>
        {% endfor %}
    </ul>
    <a href="{% url 'create_page' %}" class="btn btn-primary">Create New HW Checklist</a>
</div>
{% endblock %}