{% extends 'shop/base.html' %}
{% block title %}Ask a Question - Nana Tradings{% endblock %}

{% block content %}
<div class="container mt-5">
    <h2 class="text-center text-success fw-bold">Ask a Question</h2>
    <hr>

    <form method="POST" class="p-4 rounded shadow">
        {% csrf_token %}

        <div class="mb-3">
            <label for="id_question" class="form-label fw-bold text-success">Your Question</label>
            {{ form.question }}
        </div>

        <div class="mb-4">
            <label for="id_category" class="form-label fw-bold text-success">Category</label>
            {{ form.category }}
        </div>

        <button type="submit" class="btn btn-success fw-bold shadow-sm">
            <i class="fas fa-paper-plane me-1"></i> Submit Question
        </button>
    </form>
</div>

<style>
textarea[name="question"],
select[name="category"] {
    border: 2px solid #148818;
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    width: 100%;
}

textarea[name="question"]::placeholder {
    color: #888;
}

.dark-mode textarea[name="question"],
.dark-mode select[name="category"] {
    background-color: #2b2b2b;
    color: white;
    border-color: #00e676;
}

.dark-mode textarea[name="question"]::placeholder {
    color: #ccc;
}
</style>
{% endblock %}