{% extends 'admin/base_admin.html' %}
{% block title %}{% if media_item %}Edit{% else %}Add{% endif %} Media | ChatLab{% endblock %}
{% block admin_media_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h1 class="page-title">{% if media_item %}Edit{% else %}Add{% endif %} Media</h1>
        <p class="page-subtitle">Provide an image and tags so the AI knows when to show this picture.</p>
    </div>
    <a href="{% url 'admin_media_list' %}" class="btn btn-secondary">← Back</a>
</div>

<div class="glass-card" style="padding: 2rem; max-width: 600px;">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        
        <div class="form-group">
            <label class="form-label" for="tags">Keywords / Taglines</label>
            <textarea name="tags" id="tags" class="form-textarea" placeholder="e.g., summer menu, coffee, breakfast combo" required>{{ media_item.tags|default:'' }}</textarea>
            <small style="color: var(--text-muted); margin-top: 0.5rem; display: block;">When a user's question matches these keywords, the AI will reply with this picture.</small>
        </div>
        
        <div class="form-group" style="margin-top: 1.5rem;">
            <label class="form-label" for="images">Upload Picture(s)</label>
            {% if media_item and media_item.image %}
                <div style="margin-bottom: 1rem;">
                    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                        <div style="text-align: center;">
                            <img src="{{ media_item.image.url }}" alt="Primary Image" style="height: 80px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border-color);">
                            <p style="font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem;">Primary</p>
                        </div>
                        {% for extra in media_item.extra_files.all %}
                        <div style="text-align: center;">
                            <img src="{{ extra.image.url }}" alt="Extra Image" style="height: 80px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border-color);">
                            <p style="font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem;">Extra</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
            <div id="file-inputs-wrapper" style="display: flex; flex-direction: column; gap: 0.5rem;">
                <div style="display: flex; align-items: center; gap: 0.5rem;" class="file-input-group">
                    <input type="file" name="images" id="images" class="form-input" accept="image/*" multiple {% if not media_item %}required{% endif %}>
                    <button type="button" class="add-more-images-btn btn btn-secondary" style="padding: 0.1rem 0.5rem; font-size: 1.2rem; font-weight: bold; line-height: 1;" title="Add more files">+</button>
                </div>
            </div>
            <small style="color: var(--text-muted); margin-top: 0.5rem; display: block;">You can select multiple images. {% if request.user.company.image_limit > 0 %}Your company has an image upload limit of {{ request.user.company.image_limit }}.{% endif %}</small>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">{% if media_item %}Update Media{% else %}Save Media{% endif %}</button>
            <a href="{% url 'admin_media_list' %}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<style>
.tagify {
    --tags-border-color: var(--border-color);
    --tags-hover-border-color: var(--primary);
    --tags-focus-border-color: var(--primary);
    --tag-bg: rgba(99, 102, 241, 0.1);
    --tag-text-color: var(--text-primary);
    border-radius: 4px;
    padding: 0;
    min-height: 42px;
}
.tagify__input {
    color: var(--text-primary);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var input = document.querySelector('#tags');
    new Tagify(input, {
        delimiters: ",", 
        originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(',')
    });

    document.addEventListener('click', function(e) {
        if (e.target.closest('.add-more-images-btn')) {
            var wrapper = document.getElementById('file-inputs-wrapper');
            var newGroup = document.createElement('div');
            newGroup.style.cssText = "display: flex; align-items: center; gap: 0.5rem;";
            newGroup.className = "file-input-group";
            
            var newInput = document.createElement('input');
            newInput.type = "file";
            newInput.name = "images";
            newInput.className = "form-input";
            newInput.accept = "image/*";
            newInput.multiple = true;
            
            var removeBtn = document.createElement('button');
            removeBtn.type = "button";
            removeBtn.className = "remove-image-btn btn btn-danger";
            removeBtn.style.cssText = "padding: 0.1rem 0.5rem; font-size: 1.2rem; font-weight: bold; line-height: 1;";
            removeBtn.title = "Remove field";
            removeBtn.innerHTML = "&times;";
            
            newGroup.appendChild(newInput);
            newGroup.appendChild(removeBtn);
            wrapper.appendChild(newGroup);
        }
        
        if (e.target.closest('.remove-image-btn')) {
            e.target.closest('.file-input-group').remove();
        }
    });
});
</script>
{% endblock %}