{% extends "base.html" %}
{% load static %}

{% block title %}Artifacts - {{ playbook.name }}{% endblock %}

{% block content %}
{% if is_guest_browse %}
  {% include "partials/guest_auth_banner.html" %}
{% endif %}
<div data-testid="artifact-list">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'playbook_list' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'playbook_detail' pk=playbook.pk %}">{{ playbook.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Artifacts</li>
        </ol>
    </nav>

    <div class="hg-page-header mb-3" data-testid="artifacts-list-header">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div>
                <h1 class="hg-page-title d-flex align-items-center gap-2 mb-1">
                    <i class="fa-solid fa-gift hg-page-title-icon text-primary" aria-hidden="true"></i>
                    <span>Artifacts in {{ playbook.name }}</span>
                </h1>
                <p class="text-muted small mb-0">
                    Showing {{ filtered_count }} of {{ total_count }} artifact{{ total_count|pluralize }}
                </p>
            </div>
            <div role="toolbar" aria-label="Artifact actions" class="d-flex flex-wrap gap-2 align-items-center">
                {% if can_edit %}
                <a href="{% url 'artifact_create' playbook_pk=playbook.pk %}"
                   class="btn btn-primary"
                   data-testid="btn-create-artifact"
                   data-bs-toggle="tooltip"
                   title="Create new artifact">
                    <i class="fa-solid fa-plus"></i> Create Artifact
                </a>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="card mb-4 border-0 shadow-sm rounded-3">
        <div class="card-body">
            <div class="row g-3">
                <!-- Search Input -->
                <div class="col-md-4">
                    <label for="search-input" class="form-label hg-label-caps mb-1">Search</label>
                    <input type="text"
                           class="form-control"
                           id="search-input"
                           name="q"
                           placeholder="Search artifacts..."
                           value="{{ search_query|default:'' }}"
                           data-testid="input-search-artifacts"
                           hx-get="{% url 'artifact_list' playbook_id=playbook.pk %}"
                           hx-trigger="keyup changed delay:500ms"
                           hx-target="#artifacts-table"
                           hx-include="[name='type'], [name='required'], [name='activity']">
                </div>

                <!-- Type Filter -->
                <div class="col-md-3">
                    <label for="type-filter" class="form-label hg-label-caps mb-1">Type</label>
                    <select class="form-select"
                            id="type-filter"
                            name="type"
                            data-testid="select-type-filter"
                            hx-get="{% url 'artifact_list' playbook_id=playbook.pk %}"
                            hx-trigger="change"
                            hx-target="#artifacts-table"
                            hx-include="[name='q'], [name='required'], [name='activity']">
                        <option value="">All Types</option>
                        {% for type_code, type_name in artifact_types %}
                        <option value="{{ type_code }}" {% if type_filter == type_code %}selected{% endif %}>
                            {{ type_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Required Filter -->
                <div class="col-md-3">
                    <label for="required-filter" class="form-label hg-label-caps mb-1">Required</label>
                    <select class="form-select"
                            id="required-filter"
                            name="required"
                            data-testid="select-required-filter"
                            hx-get="{% url 'artifact_list' playbook_id=playbook.pk %}"
                            hx-trigger="change"
                            hx-target="#artifacts-table"
                            hx-include="[name='q'], [name='type'], [name='activity']">
                        <option value="">All</option>
                        <option value="true" {% if required_filter == True %}selected{% endif %}>Required Only</option>
                        <option value="false" {% if required_filter == False %}selected{% endif %}>Optional Only</option>
                    </select>
                </div>

                <!-- Activity Filter -->
                <div class="col-md-2">
                    <label for="activity-filter" class="form-label hg-label-caps mb-1">Activity</label>
                    <select class="form-select"
                            id="activity-filter"
                            name="activity"
                            data-testid="select-activity-filter"
                            hx-get="{% url 'artifact_list' playbook_id=playbook.pk %}"
                            hx-trigger="change"
                            hx-target="#artifacts-table"
                            hx-include="[name='q'], [name='type'], [name='required']">
                        <option value="">All Activities</option>
                        {% for activity in activities %}
                        <option value="{{ activity.pk }}" {% if activity_filter == activity.pk %}selected{% endif %}>
                            {{ activity.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Artifacts Table -->
    <div id="artifacts-table">
        {% include "artifacts/_table.html" %}
    </div>
</div>

<!-- Initialize Bootstrap tooltips -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
{% endblock %}