{% extends "layout.html" %}
{% from "partials/library_toolbar.html" import library_toolbar %}

{% block content %}
{{ library_toolbar(
    title="Detailer",
    category="detailers",
    create_url=url_for('create_detailer'),
    create_label="Detailer",
    has_batch_gen=true,
    has_regen_all=true,
    has_lora_create=true,
    bulk_create_url=url_for('bulk_create_detailers_from_loras'),
    has_tags=true,
    regen_tags_category="detailers",
    rescan_url=url_for('rescan_detailers'),
    get_missing_url="/get_missing_detailers",
    clear_covers_url="/clear_all_detailer_covers",
    generate_url_pattern="/detailer/{slug}/generate"
) }}

<!-- Filters -->
<form method="get" class="mb-3 d-flex gap-3 align-items-center">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="favourite" value="on" id="favFilter" {% if favourite_filter == 'on' %}checked{% endif %} onchange="this.form.submit()">
        <label class="form-check-label small" for="favFilter">&#9733; Favourites</label>
    </div>
    <select name="nsfw" class="form-select form-select-sm" style="width:auto;" onchange="this.form.submit()">
        <option value="all" {% if nsfw_filter == 'all' %}selected{% endif %}>All ratings</option>
        <option value="sfw" {% if nsfw_filter == 'sfw' %}selected{% endif %}>SFW only</option>
        <option value="nsfw" {% if nsfw_filter == 'nsfw' %}selected{% endif %}>NSFW only</option>
    </select>
</form>

<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for detailer in detailers %}
    <div class="col" id="card-{{ detailer.slug }}">
        <div class="card h-100 character-card {% if request.args.get('highlight') == detailer.slug %}border-success border-3 highlight-card{% endif %}" onclick="window.location.href='/detailer/{{ detailer.slug }}'">
            <div class="img-container">
                {% if detailer.image_path %}
                <img id="img-{{ detailer.slug }}" src="{{ url_for('static', filename='uploads/' + detailer.image_path) }}" alt="{{ detailer.name }}">
                <span id="no-img-{{ detailer.slug }}" class="text-muted d-none">No Image</span>
                {% else %}
                {% set fallback = random_gen_image('detailers', detailer.slug) %}
                {% if fallback %}
                <img id="img-{{ detailer.slug }}" src="{{ url_for('static', filename='uploads/' + fallback) }}" alt="{{ detailer.name }}" class="fallback-cover">
                <span id="no-img-{{ detailer.slug }}" class="text-muted d-none">No Image</span>
                {% else %}
                <img id="img-{{ detailer.slug }}" src="" alt="{{ detailer.name }}" class="d-none">
                <span id="no-img-{{ detailer.slug }}" class="text-muted">No Image</span>
                {% endif %}
                {% endif %}
            </div>
            <div class="card-body">
                <h5 class="card-title text-center">{% if detailer.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ detailer.name }}{% if detailer.is_nsfw %} <span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}</h5>
                <p class="card-text small text-center text-muted">
                    {% set ns = namespace(parts=[]) %}
                    {% if detailer.data.prompt is string %}
                        {% if detailer.data.prompt %}{% set ns.parts = ns.parts + [detailer.data.prompt] %}{% endif %}
                    {% elif detailer.data.prompt %}
                        {% for v in detailer.data.prompt %}
                            {% if v %}{% set ns.parts = ns.parts + [v] %}{% endif %}
                        {% endfor %}
                    {% endif %}
                    {% if detailer.data.lora and detailer.data.lora.lora_triggers %}
                        {% set ns.parts = ns.parts + [detailer.data.lora.lora_triggers] %}
                    {% endif %}
                    {{ ns.parts | join(', ') }}
                </p>
            </div>
            <div class="card-footer d-flex justify-content-between align-items-center p-1">
                {% if detailer.data.lora and detailer.data.lora.lora_name %}
                {% set lora_name = detailer.data.lora.lora_name.split('/')[-1].replace('.safetensors', '') %}
                <small class="text-muted text-truncate" title="{{ detailer.data.lora.lora_name }}">{{ lora_name }}</small>
                {% else %}<span></span>{% endif %}
                <button class="btn btn-sm btn-outline-danger py-0 px-1 flex-shrink-0 ms-1 resource-delete-btn" title="Delete"
                        data-category="detailers" data-slug="{{ detailer.slug }}" data-name="{{ detailer.name | e }}">🗑</button>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<style>
    .highlight-card {
        animation: highlight-pulse 2s ease-in-out 3;
        box-shadow: 0 0 20px rgba(25, 135, 84, 0.5) !important;
    }
    @keyframes highlight-pulse {
        0%, 100% { box-shadow: 0 0 20px rgba(25, 135, 84, 0.5); }
        50% { box-shadow: 0 0 30px rgba(25, 135, 84, 0.8); }
    }
</style>
<script>
    const highlightSlug = new URLSearchParams(window.location.search).get('highlight');
    if (highlightSlug) {
        const card = document.getElementById(`card-${highlightSlug}`);
        if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
</script>
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}