{% extends 'main.html' %}
{% load static %}
{% block content %}

<div class="container mt-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h3>Species Feedback: &nbsp;<i>{{species.name}}</i></h3>
                </div>
                <div class="card-body px-4 py-3">

                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        {% endfor %}
                    {% endif %}

                    <p>Use this form to submit feedback, corrections, or additional information about <i>{{species.name}}</i>.</p> 
                    <p class="text-muted"><small><i>** All feedback is private and visible only to staff administrators. It will never be displayed publicly. **</i></small></p>

                    <form method="POST" enctype="multipart/form-data" action="">
                        {% csrf_token %}

                        {% if not request.user.is_authenticated %}
                            <div class="mb-3">
                                <label for="id_email" class="form-label fw-bold">Your Email Address <span class="text-danger">*</span></label>
                                {{ form.email }}
                                {% if form.email.errors %}
                                    <div class="text-danger"><small>{{ form.email.errors }}</small></div>
                                {% endif %}
                                <div class="form-text">Required so we can follow up if needed.</div>
                            </div>
                        {% else %}
                            {{ form.email }}
                        {% endif %}

                        <div class="mb-3">
                            <label for="id_comment" class="form-label fw-bold">Comment / Feedback <span class="text-danger">*</span></label>
                            {{ form.comment }}
                            {% if form.comment.errors %}
                                <div class="text-danger"><small>{{ form.comment.errors }}</small></div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <p>
                                <b>Note: </b>If you would like to submit a photo for consideration as the species profile photo, you can upload it here. 
                                Please state this in your comment so we understand this is your intent.
                            </p>                            
                            <label for="id_species_image" class="form-label fw-bold">Species Image <small class="text-muted"></small></label>
                            {{ form.species_image }}
                            {% if form.species_image.errors %}
                                <div class="text-danger"><small>{{ form.species_image.errors }}</small></div>
                            {% endif %}
                            <div class="form-text">
                                </div>
                                <p class="text-muted">
                                    <small>
                                    <i> ** Be sure any photos uploaded are yours or you have permission to use them. All species photos require <i>Photo Credit</i> **</i>
                                    </small>
                                </p>
                        </div>

                        <div class="mb-3">
                            <label for="id_species_photo_credit" class="form-label fw-bold">Photo Credit <small class="text-muted"></small></label>
                            {{ form.species_photo_credit }}
                            {% if form.species_photo_credit.errors %}
                                <div class="text-danger"><small>{{ form.species_photo_credit.errors }}</small></div>
                            {% endif %}
                            <p><small>&nbsp;</small></p>
                        </div>

                        <div class="d-flex gap-2 mt-3">
                            <p><input type="submit" class="btn btn-secondary" value="&nbsp;&nbsp;Submit Feedback&nbsp;&nbsp;"/>
                                <a class="btn btn-outline-secondary" href="javascript:history.back()">Cancel</a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const commentField = document.getElementById('id_comment');
    const counter = document.getElementById('char-counter');
    const maxLength = 2500;

    function updateCounter() {
        const remaining = maxLength - commentField.value.length;
        counter.textContent = remaining;
        counter.style.color = remaining < 100 ? '#dc3545' : '';
    }

    if (commentField && counter) {
        commentField.addEventListener('input', updateCounter);
        updateCounter();
    }
</script>

{% endblock content %}