{% extends 'base.html' %}

{% block title %}Create Spreadsheet{% 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 */
    }

    body {
        font-family: 'Roboto', sans-serif;
        background-color: #f4f4f9; /* Light grey background */
        color: #6D6875; /* Dark gray text */
        padding: 20px;
    }

    h1 {
        color: #837E9F; /* Soft purple */
        font-weight: bold;
        text-align: center;
        margin-bottom: 30px;
    }

    .container {
        background-color: #FFFFFF; /* White background for the form container */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        max-width: 600px;
        margin: auto;
    }

    .form-group label {
        color: #837E9F; /* Soft purple for labels */
        font-weight: bold;
    }

    .form-control {
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 15px;
    }

    .btn-primary {
        background-color: #FF9AA2; /* Pastel red */
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .btn-primary:hover {
        background-color: #FFD3B4; /* Lighter pastel orange on hover */
    }
</style>
<div class="container mt-5">
    <h1>Create New Test Analysis Form</h1>
    <form method="post" class="mt-3">
        {% csrf_token %}
        <div class="form-group">
            <label for="name">Test Name:</label>
            <input type="text" id="name" name="name" class="form-control" style="width: 300px;" required>
        </div>
        
        <div class="form-group">
            <label for="class_field">Class:</label>
            <input type="text" id="class_field" name="class_field" class="form-control" style="width: 300px;" required>
        </div>
        
        <div class="form-group">
            <label for="test">Test:</label>
            <input type="text" id="test" name="test" class="form-control" style="width: 300px;" required>
        </div>
        
        <div class="form-group">
            <label for="date_field">Date:</label>
            <input type="date" id="date_field" name="date_field" class="form-control" style="width: 300px;" required>
        </div>
        
        <div class="form-group">
            <label for="initial_rows">Number of Students:</label>
            <input type="number" id="initial_rows" name="initial_rows" value="10" class="form-control" style="width: 300px;" required>
        </div>
        
        <button type="submit" class="btn btn-primary">Create New Test Analysis Form</button>
    </form>
</div>
{% endblock %}