{% extends 'core/base.html' %}

{% block title %}Favorites | Killian{% endblock %}

{% block content %}
<div class="breadcrumbs">
    <a href="{% url 'dashboard' %}">Dashboard</a>
    <span>/</span>
    <strong>Favorites</strong>
</div>

<div class="page-head">
    <div>
        <h1>Favorites</h1>
        <p>Your saved Killian pages for quick access.</p>
    </div>
</div>

<section class="module-panel">
    <div class="module-panel-head">
        <div>
            <h2>My Favorites</h2>
            <span>
                {{ favorite_rows|length }}
                favorite{{ favorite_rows|length|pluralize }}
            </span>
        </div>

        <div
            class="list-sort-controls js-list-sort-controls"
            data-sort-target="#favorites-page-list"
        >
            <label for="favorites-sort">Sort by</label>
            <select id="favorites-sort" class="list-sort-select js-list-sort-select">
                <option value="name">Name</option>
                <option value="type">Type</option>
                <option value="organization">Organization</option>
            </select>
            <button
                type="button"
                class="button secondary compact list-sort-direction js-list-sort-direction"
                data-sort-direction="asc"
                aria-label="Sort ascending; click for descending"
            >
                <span class="list-sort-direction-indicator" aria-hidden="true">↑</span>
                <span class="list-sort-direction-label">Ascending</span>
            </button>
        </div>
    </div>

    <div id="favorites-page-list" class="favorites-page-list">
        {% for favorite in favorite_rows %}
            <div
                class="favorite-list-row js-list-sort-row"
                data-favorite-url="{{ favorite.url }}"
                data-sort-name="{{ favorite.name|escape }}"
                data-sort-type="{{ favorite.favorite_type|escape }}"
                data-sort-organization="{% if favorite.organization %}{{ favorite.organization.name|escape }}{% endif %}"
            >
                <a
                    class="favorite-list-main"
                    href="{{ favorite.url }}"
                >
                    <strong>{{ favorite.name }}</strong>

                    <span>
                        {{ favorite.favorite_type }}
                        {% if favorite.organization %}
                            · {{ favorite.organization.name }}
                        {% endif %}
                    </span>
                </a>

                <button
                    type="button"
                    class="favorite-list-star active js-favorite-remove"
                    data-favorite-url="{{ favorite.url }}"
                    data-favorite-name="{{ favorite.name }}"
                    title="Remove from Favorites"
                    aria-label="Remove {{ favorite.name }} from Favorites"
                >
                    <svg
                        viewBox="0 0 24 24"
                        width="23"
                        height="23"
                        aria-hidden="true"
                    >
                        <path
                            d="M12 2.8l2.78 5.63 6.22.9-4.5 4.39 1.06 6.2L12 17l-5.56 2.92 1.06-6.2L3 9.33l6.22-.9L12 2.8z"
                        />
                    </svg>
                </button>
            </div>
        {% empty %}
            <div class="empty-state">
                <h3>No favorites yet</h3>
                <p>
                    Use the star on any Killian page to add it here.
                </p>
            </div>
        {% endfor %}
    </div>
</section>
{% endblock %}