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

{% block head_extra %}
<style>
    .search-container { margin-bottom: 2rem; }
    .filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
    .filter-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        border-radius: 1rem;
        border: 1px solid #dee2e6;
        background: #fff;
        color: #495057;
        text-decoration: none;
        transition: all 0.2s;
    }
    .filter-chip:hover { background: #e9ecef; }
    .filter-chip.active {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }
    .search-results { margin-top: 2rem; }
    .result-item {
        padding: 1rem;
        border-bottom: 1px solid #dee2e6;
    }
    .result-item:last-child { border-bottom: none; }
    .result-title { font-weight: 600; margin-bottom: 0.25rem; }
    .result-meta { font-size: 0.875rem; color: #6c757d; }
    .result-tags { margin-top: 0.5rem; }
    .result-tag {
        display: inline-block;
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem;
        border-radius: 0.25rem;
        background: #e9ecef;
        color: #495057;
        margin-right: 0.25rem;
    }
    .no-results { padding: 2rem; text-align: center; color: #6c757d; }
</style>
{% endblock %}

{% block content %}
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
    <div
        class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Search Scrobbles</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            {% if user.is_authenticated %}
            <div class="btn-group me-2">
              <a href="{% url 'scrobbles:calendar' %}" class="btn btn-sm btn-outline-secondary">Calendar</a>
            </div>
            <div class="btn-group me-2">
              <a href="{% url 'admin:index' %}" class="btn btn-sm btn-outline-secondary">Admin</a>
            </div>
            <div class="btn-group me-2">
              <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">Charts</a>
            </div>
            {% endif %}
        </div>
    </div>

<div class="container" style="margin-bottom: 100px;">
    <form method="get" action="{% url 'scrobbles:search' %}" class="search-container">
        <div class="row">
            <div class="col-md-8">
                <input type="text"
                       name="q"
                       class="form-control form-control-lg"
                       placeholder="Search scrobbles..."
                       value="{{ query }}">
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary btn-lg">Search</button>
            </div>
        </div>

        <div class="filter-chips">
            <a href="{% url 'scrobbles:search' %}{% if query %}?q={{ query }}{% endif %}"
               class="filter-chip{% if not media_type %} active{% endif %}">
                All
            </a>
            {% for value, label in media_types %}
            <a href="{% url 'scrobbles:search' %}?{% if query %}q={{ query }}&{% endif %}media_type={{ value }}"
               class="filter-chip{% if media_type == value %} active{% endif %}">
                {{ label }}
            </a>
            {% endfor %}
        </div>
    </form>

    {% if query or media_type %}
    <div class="search-results">
        {% if scrobbles %}
        <p class="text-muted">{{ scrobbles|length }} result{{ scrobbles|length|pluralize }}</p>
        {% for scrobble in scrobbles %}
        <div class="result-item">
            <div class="result-title">
                <a href="{% url 'scrobbles:detail' scrobble.id %}">
                    {{ scrobble|truncatechars:100 }}
                </a>
            </div>
            <div class="result-meta">
                <span class="badge bg-secondary">{{ scrobble.get_media_type_display }}</span>
                {{ scrobble.timestamp|date:"M d, Y" }}
                {% if scrobble.source %} via {{ scrobble.source }}{% endif %}
            </div>
            {% if scrobble.tags.all %}
            <div class="result-tags">
                {% for tag in scrobble.tags.all %}
                <span class="result-tag">{{ tag.name }}</span>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
        {% else %}
        <div class="no-results">
            No scrobbles found matching your search.
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="no-results">
        <p>Enter a search term or select a media type to filter.</p>
    </div>
    {% endif %}
</div>
</main>
{% endblock %}