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

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

{% block content %}
<div class="container mt-4" 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>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-start mb-4">
        <div>
            <h2>
                <i class="fa-solid fa-gift"></i> Artifacts in {{ playbook.name }}
            </h2>
            <p class="text-muted mb-0">View and manage all artifacts</p>
        </div>
        <div>
            <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>
        </div>
    </div>

    <!-- Search and Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3">
                <!-- Search Input -->
                <div class="col-md-4">
                    <label for="search-input" class="form-label">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">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">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">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>

            <!-- Results Count -->
            <div class="mt-3">
                <small class="text-muted">
                    Showing <strong>{{ filtered_count }}</strong> of <strong>{{ total_count }}</strong> artifacts
                </small>
            </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 %}