{% extends "base.html" %}

{% block title %}Add Things to Box {{ box.id }} - LabHelper{% endblock %}

{% block page_header %}
<div class="page-header">
    <h1><i class="fas fa-plus-circle"></i> Add Things to Box {{ box.id }}</h1>
    <p class="breadcrumb">
        <a href="/"><i class="fas fa-home"></i> Home</a> / 
        <a href="/box/{{ box.id }}/"><i class="fas fa-box"></i> Box {{ box.id }}</a> / 
        Add Things
    </p>
</div>
{% endblock %}

{% block content %}
<div class="section">
    <div style="margin-bottom: 20px; padding: 15px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 10px; border-left: 4px solid #667eea;">
        <span style="color: #555; font-size: 16px;">
            <strong><i class="fas fa-info-circle"></i> Box:</strong> {{ box.id }} ({{ box.box_type.name }})
        </span>
    </div>
    
    {% if formset.non_form_errors %}
    <div class="alert alert-error">
        <i class="fas fa-exclamation-triangle"></i>
        {% for form_errors in formset.non_form_errors %}
            {% for field, errors in form_errors.items %}
                {% for error in errors %}
                {{ error }}
                {% endfor %}
            {% endfor %}
        {% endfor %}
    </div>
    {% endif %}
    
    {% if success_message %}
    <div class="alert alert-success">
        <i class="fas fa-check-circle"></i> {{ success_message }}
    </div>
    {% endif %}
    
    {% if formset.total_form_count %}
    <form method="post" enctype="multipart/form-data" style="overflow-x: auto;">
        {% csrf_token %}
        <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
            <thead>
                <tr style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                    <th style="padding: 12px 15px; text-align: left; font-weight: 600;"></th>
                    <th style="padding: 12px 15px; text-align: left; font-weight: 600;">Name</th>
                    <th style="padding: 12px 15px; text-align: left; font-weight: 600;">Type</th>
                    <th style="padding: 12px 15px; text-align: left; font-weight: 600;">Description</th>
                    <th style="padding: 12px 15px; text-align: left; font-weight: 600;">Picture</th>
                </tr>
            </thead>
            {{ formset.management_form }}
            {% for form in formset %}
            <tr style="border-bottom: 1px solid #e0e0e0; background: {% if forloop.counter|divisibleby:2 %}#f8f9fa{% endif %};">
                <td style="padding: 12px 15px;">
                    {{ form.id }}
                </td>
                <td style="padding: 12px 15px;">
                    <div style="display: flex; gap: 5px; flex-wrap: wrap; align-items: center;">
                        {{ form.name }}
                        {% for error in form.name.errors %}
                        <div style="color: #e74c3c; font-size: 13px; margin-top: 5px;">
                            <i class="fas fa-exclamation-circle"></i> {{ error }}
                        </div>
                        {% endfor %}
                        <span style="color: #e74c3c;">*</span>
                    </div>
                </td>
                <td style="padding: 12px 15px;">
                    <div style="display: flex; gap: 5px; flex-wrap: wrap; align-items: center;">
                        {{ form.thing_type }}
                        {% for error in form.thing_type.errors %}
                        <div style="color: #e74c3c; font-size: 13px; margin-top: 5px;">
                            <i class="fas fa-exclamation-circle"></i> {{ error }}
                        </div>
                        {% endfor %}
                        <span style="color: #e74c3c;">*</span>
                    </div>
                </td>
                <td style="padding: 12px 15px;">
                    <div style="display: flex; gap: 5px; flex-wrap: wrap; align-items: center;">
                        {{ form.description }}
                        {% for error in form.description.errors %}
                        <div style="color: #e74c3c; font-size: 13px; margin-top: 5px;">
                            <i class="fas fa-exclamation-circle"></i> {{ error }}
                        </div>
                        {% endfor %}
                    </div>
                </td>
                <td style="padding: 12px 15px;">
                    <div style="display: flex; gap: 5px; flex-wrap: wrap; align-items: center;">
                        {{ form.picture }}
                        {% for error in form.picture.errors %}
                        <div style="color: #e74c3c; font-size: 13px; margin-top: 5px;">
                            <i class="fas fa-exclamation-circle"></i> {{ error }}
                        </div>
                        {% endfor %}
                    </div>
                </td>
            </tr>
            {% endfor %}
        </table>
        
        <div style="text-align: center; margin-top: 30px;">
            <button type="submit" class="btn">
                <i class="fas fa-save"></i> Save Things
            </button>
        </div>
    </form>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
$('form input, form select, form textarea').on('focus', function() {
    $(this).css('border-color', '#667eea');
    $(this).css('box-shadow', '0 0 0 3px rgba(102, 126, 234, 0.1)');
}).on('blur', function() {
    $(this).css('border-color', '#e0e0e0');
    $(this).css('box-shadow', 'none');
});
</script>
{% endblock %}