{% extends 'base.html' %}
{% load static %}

{% block title %}Submit a Ticket{% endblock %}

{% block head %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
    .form-container {
        max-width: 700px;
        margin: 50px auto;
        padding: 30px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .form-container h1 {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        margin-bottom: 30px;
    }
    .form-label {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
    }
    .btn-primary-custom {
        background-color: #1A237E;
        border-color: #1A237E;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        padding: 10px 25px;
    }
    .btn-primary-custom:hover {
        background-color: #0D1241;
        border-color: #0D1241;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="form-container">
        <h1>Submit a New Ticket</h1>
        <form method="post">
            {% csrf_token %}
            <div class="mb-3">
                {{ form.name.label_tag }}
                {{ form.name }}
            </div>
            <div class="mb-3">
                {{ form.email.label_tag }}
                {{ form.email }}
            </div>
            <div class="mb-3">
                {{ form.subject.label_tag }}
                {{ form.subject }}
            </div>
            <div class="mb-3">
                {{ form.description.label_tag }}
                {{ form.description }}
            </div>
            <button type="submit" class="btn btn-primary-custom">Submit</button>
        </form>
    </div>
</div>
{% endblock %}
