{% extends "base_view.html" %}
{% load static %}

{% block title %}meliza-lab : bird colony : edit tags{% endblock %}

{% block css %}
<style>
.tag-item {
    display: inline-block;
    margin: 3px;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-item.active {
    background-color: #337ab7;
    color: white;
    border-color: #2e6da4;
}

.tag-item:hover {
    background-color: #f5f5f5;
    border-color: #adadad;
}

.tag-item.active:hover {
    background-color: #286090;
    border-color: #204d74;
}

.new-tag-form {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.current-tags {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f0f8ff;
    border-radius: 4px;
}

.loading {
    opacity: 0.5;
    pointer-events: none;
}

</style>
{% endblock %}

{% block scripts %}
<script src="{% static 'birds/js/htmx.min.js' %}"></script>
<script>
// Add loading states and smooth animations
document.addEventListener('htmx:beforeRequest', function(evt) {
    evt.target.classList.add('loading');
});

document.addEventListener('htmx:afterRequest', function(evt) {
    evt.target.classList.remove('loading');
});

// Toggle new tag form
function toggleNewTagForm() {
    const form = document.getElementById('new-tag-form');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}
</script>
{% endblock %}

{% block content %}
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Edit Tags: {{ animal }}</h3>
    </div>
    <div class="panel-body">
        <p><strong>Instructions:</strong> This form is used to update the tags for an animal. After selecting zero or more tags,
        set the date and enter an optional comment to generate a corresponding event in the database.</p>
        
        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">Tags</label>
                <div class="col-sm-10">
                    <div id="tag-list" 
                         hx-target="#tag-list"
                         hx-swap="outerHTML">
                        {% include "birds/partials/tag_list.html" %}
                    </div>
                </div>
            </div>
	</div>

        <form method="post" action="{% url 'birds:update_tags' animal.uuid %}" class="form-horizontal" role="form">
            {% csrf_token %}

            <div class="form-group {% if form.date.errors %}has-error{% endif %}">
                <label for="id_date" class="col-sm-2 control-label">{{ form.date.label }} *</label>
                <div class="col-sm-3">
                    {{ form.date }}
                </div>
            </div>
            <div class="form-group {% if form.description.errors %}has-error{% endif %}">
                <label for="id_description" class="col-sm-2 control-label">{{ form.description.label }}</label>
                <div class="col-sm-5">
                    {{ form.description }}
                </div>
            </div>
            <div class="form-group {% if form.entered_by.errors %}has-error{% endif %}">
                <label for="id_entered_by" class="col-sm-2 control-label">{{ form.entered_by.label }} * </label>
                <div class="col-sm-3">
                    {{ form.entered_by }}
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Update tags</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}