{% extends 'base.html' %}
{% block title %}Submit Complaint{% endblock %}

{% block content %}
<div class="container page-container">

    <div class="page-header mb-3">
        <h4><i class="bi bi-exclamation-circle"></i> Submit Complaint</h4>
        <p class="text-muted">Report an issue in your unit</p>
    </div>

    <div class="card shadow-sm p-3">

        <!-- Optional: show assigned unit -->
        <div class="mb-3">
            <label class="form-label">Your Unit</label>
            <input type="text"
                   class="form-control"
                   value="{{ request.user.tenantprofile.unit.unit_number|default:'Not Assigned' }}"
                   disabled>
        </div>

        <form method="post">
            {% csrf_token %}

            <div class="mb-3">
                <label class="form-label">Category</label>
                <select name="category" class="form-select" required>
                    <option value="">Select Category</option>
                    <option value="plumbing">Plumbing</option>
                    <option value="electricity">Electricity</option>
                    <option value="security">Security</option>
                    <option value="other">Other</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Description</label>
                <textarea name="description"
                          class="form-control"
                          rows="4"
                          required></textarea>
            </div>

            <button type="submit" class="btn btn-dark w-100">
                <i class="bi bi-send"></i> Submit Complaint
            </button>

        </form>

    </div>

</div>
{% endblock %}