{% extends "base.html" %}
{% block title %}Ask a Question — {{ settings.APP_NAME }}{% endblock %}

{% block content %}
<div class="container page-content">
    <h1>Ask a Question</h1>
    <div id="qError" class="alert alert-error" style="display:none;"></div>
    <form id="questionForm" class="form-card">
        <div class="form-group">
            <label for="title">Question Title *</label>
            <input type="text" id="title" required class="form-control" placeholder="What would you like to know?">
        </div>
        <div class="form-group">
            <label for="body">Details *</label>
            <textarea id="body" required rows="8" class="form-control" placeholder="Provide context for your question..."></textarea>
        </div>
        <div class="form-group">
            <label for="field_id">Field</label>
            <select id="field_id" class="form-control">
                <option value="">Select field...</option>
                {% for field in fields %}
                <option value="{{ field.id }}">{{ field.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label for="tags">Tags (comma-separated)</label>
            <input type="text" id="tags" class="form-control" placeholder="deep-learning, pytorch, transformers">
        </div>
        <button type="submit" class="btn btn-primary btn-lg">Post Question</button>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('questionForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const errEl = document.getElementById('qError');
    errEl.style.display = 'none';
    const tagsStr = document.getElementById('tags').value;
    const tags = tagsStr ? tagsStr.split(',').map(t => t.trim()).filter(Boolean) : [];
    const fieldId = document.getElementById('field_id').value;

    try {
        const res = await fetch('/api/questions', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                title: document.getElementById('title').value,
                body: document.getElementById('body').value,
                field_id: fieldId ? parseInt(fieldId) : null,
                tags,
            }),
        });
        if (!res.ok) {
            const data = await res.json();
            errEl.textContent = data.detail || 'Failed';
            errEl.style.display = 'block';
            return;
        }
        const data = await res.json();
        window.location.href = '/questions/' + data.id;
    } catch(err) {
        errEl.textContent = 'Network error';
        errEl.style.display = 'block';
    }
});
</script>
{% endblock %}