{% extends spa_base or "base.html"%}
{% block title %}Novo Chamado - Suporte{% endblock %}
{% block extra_head %}
<style>
    .form-page { max-width: 600px; margin: 0 auto; }
    .page-header { margin-bottom: 32px; }
    .page-header h1 { font-size: 1.5em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .page-header p { color: var(--text-muted); font-size: 0.9em; }
    .form-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 32px; border: 1px solid var(--border); }
    .form-group { margin-bottom: 20px; }
    .form-group:last-child { margin-bottom: 0; }
    .form-group label { display: block; font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; font-weight: 500; }
    .form-group input, .form-group textarea {
        width: 100%; padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border);
        border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.9em; font-family: inherit;
        transition: var(--transition);
    }
    .form-group textarea { min-height: 150px; resize: vertical; }
    .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--text-secondary); }
    .form-group .btn { width: 100%; justify-content: center; }
</style>
{% endblock %}
{% block content %}
<div class="form-page">
    <div class="page-header">
        <h1>Abrir Chamado de Suporte</h1>
        <p>Descreva seu problema e entraremos em contato.</p>
    </div>
    <div class="form-card">
        <form method="POST">
            <div class="form-group">
                <label for="ticketSubject">Assunto</label>
                <input type="text" id="ticketSubject" name="subject" placeholder="Ex: Problema ao assistir canal..." required>
            </div>
            <div class="form-group">
                <label for="ticketMessage">Mensagem</label>
                <textarea id="ticketMessage" name="message" placeholder="Descreva detalhadamente o problema..." required></textarea>
            </div>
            <button type="submit" class="btn">Enviar Chamado</button>
        </form>
    </div>
</div>
{% endblock %}