{% extends "layout.html" %}

{% block content %}
{% from "partials/library_toolbar.html" import library_toolbar %}
{{ library_toolbar(
    title="Checkpoint",
    category="checkpoints",
    create_url=none,
    has_batch_gen=true,
    has_regen_all=true,
    has_lora_create=true,
    bulk_create_url=url_for('bulk_create_checkpoints'),
    has_tags=false,
    rescan_url=url_for('rescan_checkpoints'),
    get_missing_url="/get_missing_checkpoints",
    clear_covers_url="/clear_all_checkpoint_covers",
    generate_url_pattern="/checkpoint/{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 ckpt in checkpoints %}
    <div class="col" id="card-{{ ckpt.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/checkpoint/{{ ckpt.slug }}'">
            <div class="img-container">
                {% if ckpt.image_path %}
                <img id="img-{{ ckpt.slug }}" src="{{ url_for('static', filename='uploads/' + ckpt.image_path) }}" alt="{{ ckpt.name }}">
                <span id="no-img-{{ ckpt.slug }}" class="text-muted d-none">No Image</span>
                {% else %}
                {% set fallback = random_gen_image('checkpoints', ckpt.slug) %}
                {% if fallback %}
                <img id="img-{{ ckpt.slug }}" src="{{ url_for('static', filename='uploads/' + fallback) }}" alt="{{ ckpt.name }}" class="fallback-cover">
                <span id="no-img-{{ ckpt.slug }}" class="text-muted d-none">No Image</span>
                {% else %}
                <img id="img-{{ ckpt.slug }}" src="" alt="{{ ckpt.name }}" class="d-none">
                <span id="no-img-{{ ckpt.slug }}" class="text-muted">No Image</span>
                {% endif %}
                {% endif %}
            </div>
            <div class="card-body">
                <h5 class="card-title text-center">
                    {% if ckpt.is_favourite %}<span class="text-warning">&#9733;</span> {% endif %}{{ ckpt.name }}
                    {% if ckpt.is_nsfw %}<span class="badge bg-danger" style="font-size:0.6rem;vertical-align:middle;">NSFW</span>{% endif %}
                </h5>
            </div>
            <div class="card-footer d-flex justify-content-between align-items-center p-1">
                <small class="text-muted" title="{{ ckpt.checkpoint_path }}">{{ ckpt.checkpoint_path.split('/')[0] }}</small>
                <button class="btn btn-sm btn-outline-danger py-0 px-1 ms-1 resource-delete-btn" title="Delete"
                        data-category="checkpoints" data-slug="{{ ckpt.slug }}" data-name="{{ ckpt.name | e }}">🗑</button>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/library-toolbar.js') }}"></script>
{% endblock %}