{% load django_htmx %}
<div id="series-split-by-tag-panel" class="d-flex flex-column gap-2">
    <div class="d-flex flex-wrap gap-2">
        <button type="button"
                class="btn btn-outline-warning btn-sm"
                hx-get="{% url 'atlas:series_split_by_tag' pk=series.pk %}?analyze=1"
                hx-target="#series-split-by-tag-panel"
                hx-swap="outerHTML"
                hx-indicator="#series-split-analysis-indicator">
            Analyze split options
        </button>
        <span id="series-split-analysis-indicator" class="spinner-border spinner-border-sm text-warning htmx-indicator" role="status" aria-hidden="true"></span>
    </div>

    {% if analyze_requested %}
        {% if split_options %}
            <form method="post"
                  action="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
                  hx-post="{% url 'atlas:series_split_by_tag' pk=series.pk %}"
                  hx-target="#split-by-tag-result"
                hx-swap="innerHTML"
                hx-indicator="#series-split-submit-indicator">
                {% csrf_token %}
                <div class="input-group input-group-sm">
                    <select name="dicom_tag" class="form-select form-select-sm">
                        {% for option in split_options %}
                            <option value="{{ option.tag_value }}">{{ option.tag_label }} ({{ option.split_count }} series)</option>
                        {% endfor %}
                    </select>
                    <button type="submit" class="btn btn-outline-warning btn-sm">Split</button>
                </div>
            </form>
            <span id="series-split-submit-indicator" class="spinner-border spinner-border-sm text-warning htmx-indicator" role="status" aria-hidden="true"></span>
            <p class="small text-muted mb-0">Only tags that can produce more than one output series are shown.</p>
        {% else %}
            <div class="alert alert-secondary mb-0 small">
                No common split tags were found that can divide this series into multiple groups.
            </div>
        {% endif %}
    {% else %}
        <p class="small text-muted mb-0">Run analysis to detect valid split tags and estimated output series count.</p>
    {% endif %}

    <div id="split-by-tag-result"></div>
</div>