{% extends 'base.html' %}
{% block title %}Test Analysis{% endblock %}

{% block content %}
<a href="{% url 'index' %}" class="back-button">Exit App</a>
<style>
        .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>
<div class="container p-3">
    <div class="container">
        <h1 class="mt-5" style="color: #837E9F; font-weight: bold;">Available Test Analysis Form</h1>
        <ul class="list-group mt-3">
            {% for spreadsheet in spreadsheets %}
                <li class="list-group-item d-flex justify-content-between align-items-center" style="background-color: #FFFFFF; border: 1px solid #ddd; border-radius: 5px;">
                    <a href="{% url 'spreadsheet_detail' pk=spreadsheet.pk %}" style="color: #6D6875;">{{ spreadsheet.name }}  {{ spreadsheet.test }}  {{ spreadsheet.class_field }}  {{ spreadsheet.date_field }}</a>
                    <form method="post" action="{% url 'delete_spreadsheet' pk=spreadsheet.pk %}" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure you want to delete this spreadsheet?')" style="background-color: #FF9AA2; border: none;">Delete</button>
                    </form>
                </li>
            {% endfor %}
        </ul>
    </div>

    <div class="container mt-5">
        <h1 style="color: #837E9F; font-weight: bold;">Create New Test Analysis Form</h1>
        <form method="post" class="mt-3">
            {% csrf_token %}
            <div class="form-group">
                <label for="name" style="color: #837E9F;">Test Name:</label>
                <input type="text" id="name" name="name" class="form-control" style="width: 300px; border: 1px solid #ddd; border-radius: 5px;" required>
            </div>
            
            <div class="form-group">
                <label for="class_field" style="color: #837E9F;">Class:</label>
                <input type="text" id="class_field" name="class_field" class="form-control" style="width: 300px; border: 1px solid #ddd; border-radius: 5px;" required>
            </div>
            
            <div class="form-group">
                <label for="test" style="color: #837E9F;">Test:</label>
                <input type="text" id="test" name="test" class="form-control" style="width: 300px; border: 1px solid #ddd; border-radius: 5px;" required>
            </div>
            
            <div class="form-group">
                <label for="date_field" style="color: #837E9F;">Date:</label>
                <input type="date" id="date_field" name="date_field" class="form-control" style="width: 300px; border: 1px solid #ddd; border-radius: 5px;" required>
            </div>
            
            <div class="form-group">
                <label for="initial_rows" style="color: #837E9F;">Number of Students:</label>
                <input type="number" id="initial_rows" name="initial_rows" value="10" class="form-control" style="width: 300px; border: 1px solid #ddd; border-radius: 5px;" required>
            </div>
            
            <button type="submit" class="btn btn-primary" style="background-color: #FF9AA2; border: none; border-radius: 5px; padding: 10px 20px; color: white;">Create New Test Analysis Form</button>
        </form>
    </div>
</div>
{% endblock %}