{% 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 style="display: flex; align-items: center; gap: 0.5rem;">
                <input type="file" name="images" id="images" class="form-input" accept="image/*" multiple {% if not media_item %}required{% endif %}>
                <span style="font-size: 1.2rem; font-weight: bold; color: var(--text-muted);" title="You can select multiple files at once">+</span>
            </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(',')
    });
});
</script>
{% endblock %}