{% load i18n %}
{# Двухшаговая выдача: тип → список. Ожидает: widget_id, selected_target, selected_location_id, selected_employee_id, require_target (bool), allow_empty (bool) #}
<div class="it-assign-widget" data-assign-widget="{{ widget_id }}" style="display:flex; align-items:flex-end; gap:0.75rem; flex-wrap:wrap; flex:1; min-width:0;">
    <div style="min-width:11rem;">
        <label style="display:block; font-size:0.75rem; color:var(--color-muted-foreground); margin-bottom:0.25rem;">{% trans "Кому выдано" %}</label>
        <select name="assign_target" class="input it-assign-target" style="width:100%; min-width:11rem;"
                onchange="itAssignTargetChanged(this)" {% if require_target %}required{% endif %}>
            {% if allow_empty %}
            <option value="" {% if not selected_target %}selected{% endif %}>{% trans "— на склад / не выдавать" %}</option>
            {% else %}
            <option value="" {% if not selected_target %}selected{% endif %}>{% trans "— выберите тип —" %}</option>
            {% endif %}
            <option value="pharmacy" {% if selected_target == 'pharmacy' %}selected{% endif %}>{% trans "Аптека" %}</option>
            <option value="office" {% if selected_target == 'office' %}selected{% endif %}>{% trans "Офис / склад / сервис" %}</option>
            <option value="employee" {% if selected_target == 'employee' %}selected{% endif %}>{% trans "Сотрудник" %}</option>
        </select>
    </div>

    <div class="it-assign-pick" data-assign-pick="pharmacy" style="min-width:16rem; flex:1;{% if selected_target != 'pharmacy' %} display:none;{% endif %}">
        <label style="display:block; font-size:0.75rem; color:var(--color-muted-foreground); margin-bottom:0.25rem;">{% trans "Аптека" %}</label>
        <div class="searchable-select" data-placeholder="{% trans 'Поиск: А3, П10, адрес...' %}">
            <select name="location_id" {% if selected_target != 'pharmacy' %}disabled{% endif %} hidden{% if lazy_lists %} data-it-options="pharmacy"{% endif %}>
                <option value="">{% trans "— выберите аптеку —" %}</option>
                {% if lazy_lists %}
                    {% if selected_target == 'pharmacy' and selected_location_id %}
                    <option value="{{ selected_location_id }}" selected>{{ selected_location_label|default:selected_location_id }}</option>
                    {% endif %}
                {% else %}
                    {% for location in it_pharmacies %}
                    <option value="{{ location.id }}" data-search="{{ location.search_text }}"
                        {% if selected_target == 'pharmacy' and location.id == selected_location_id %}selected{% endif %}>{{ location }}</option>
                    {% endfor %}
                {% endif %}
            </select>
        </div>
    </div>

    <div class="it-assign-pick" data-assign-pick="office" style="min-width:16rem; flex:1;{% if selected_target != 'office' %} display:none;{% endif %}">
        <label style="display:block; font-size:0.75rem; color:var(--color-muted-foreground); margin-bottom:0.25rem;">{% trans "Офис / склад / сервис" %}</label>
        <div class="searchable-select" data-placeholder="{% trans 'Поиск: офис, склад, Вайтер Юг…' %}">
            <select name="location_id" {% if selected_target != 'office' %}disabled{% endif %} hidden{% if lazy_lists %} data-it-options="office"{% endif %}>
                <option value="">{% trans "— выберите локацию —" %}</option>
                {% if lazy_lists %}
                    {% if selected_target == 'office' and selected_location_id %}
                    <option value="{{ selected_location_id }}" selected>{{ selected_location_label|default:selected_location_id }}</option>
                    {% endif %}
                {% else %}
                    {% for location in it_offices %}
                    <option value="{{ location.id }}" data-search="{{ location.search_text }}"
                        {% if selected_target == 'office' and location.id == selected_location_id %}selected{% endif %}>{{ location }}</option>
                    {% endfor %}
                {% endif %}
            </select>
        </div>
    </div>

    <div class="it-assign-pick" data-assign-pick="employee" style="min-width:14rem;{% if selected_target != 'employee' %} display:none;{% endif %}">
        <label style="display:block; font-size:0.75rem; color:var(--color-muted-foreground); margin-bottom:0.25rem;">{% trans "Сотрудник" %}</label>
        <select name="assigned_to_id" class="input" style="width:100%; min-width:12rem;" {% if selected_target != 'employee' %}disabled{% endif %}{% if lazy_lists %} data-it-options="employee"{% endif %}>
            <option value="">{% trans "— выберите сотрудника —" %}</option>
            {% if lazy_lists %}
                {% if selected_target == 'employee' and selected_employee_id %}
                <option value="{{ selected_employee_id }}" selected>{{ selected_employee_label|default:selected_employee_id }}</option>
                {% endif %}
            {% else %}
                {% for emp in it_employees %}
                <option value="{{ emp.id }}" {% if selected_target == 'employee' and emp.id == selected_employee_id %}selected{% endif %}>{{ emp.last_name }} {{ emp.first_name }}</option>
                {% endfor %}
            {% endif %}
        </select>
    </div>
</div>