{% extends "base.html" %}

{% block title %}{{ _('Submit a Thought') }} - {{ _('Wunschkonzert') }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1 class="display-4"><i class="fas fa-plus-circle"></i> {{ _('Submit a Thought') }}</h1>
        <p class="lead">{{ _('Share your idea with the community. What would you like to see or change?') }}</p>
        {% if current_project %}
        <div class="alert alert-light">
            <i class="fas fa-project-diagram"></i> {{ _("Submitting to project") }}: <strong>{{ current_project.name }}</strong>
        </div>
        {% endif %}
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-body">
                <div class="alert alert-info mb-4">
                    <p>{{ _("A thought should be written as if describing a current state like 'All rooms of the building have natural light.' or 'The internet connection is fast and reliable.' They must not be something good, they can also describe a worry or fear. 'The location is located at a great height' might be positive to some (great views) and negative to others (fear of heights).") }}</p>
                </div>
                <form method="POST" action="{{ url_for('main.submit_thought') }}">
                    <div class="mb-3">
                        <label for="content" class="form-label">{{ _('Your Thought') }}</label>
                        <textarea class="form-control" id="content" name="content" rows="5" required 
                                  placeholder="{{ _('Share your idea, suggestion, or wish...') }}"></textarea>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            {{ _('Submit Thought') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card shadow-sm">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-lightbulb"></i> {{ _('Tips for Good Thoughts') }}</h5>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <i class="fas fa-check text-success"></i>
                        {{ _("Formulate a clear, concise thought") }}
                    </li>
                    <li class="list-group-item">
                        <i class="fas fa-check text-success"></i>
                        {{ _("The sentence should describe a current state") }}
                    </li>
                    <li class="list-group-item">
                        <i class="fas fa-check text-success"></i>
                        {{ _("Others should understand what you mean") }}
                    </li>
                    <li class="list-group-item">
                        <i class="fas fa-check text-success"></i>
                        {{ _("Read already submitted thoughts to avoid duplicates") }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        
        form.addEventListener('submit', function(e) {
            const content = document.getElementById('content').value.trim();
            
            if (!content) {
                e.preventDefault();
                showToast('Thought cannot be empty', 'error');
            }
        });
    });
</script>
{% endblock %}