{% extends "base" %}

{% block title %}Search "{{ query }}" · {{ package.name }}{% endblock %}

{% block extra_head %}
<style>
    .search-header { margin-bottom: 20px; }
    .search-header h1 {
        font-size: 18px;
        font-weight: 500;
        font-family: var(--mono);
        margin: 0 0 4px;
    }
    .result-count { font-size: 12px; color: var(--text-dim); font-family: var(--mono); margin-bottom: 16px; }

    .search-result {
        padding: 12px 16px;
        transition: background .1s, border-color .1s;
        text-decoration: none;
        color: var(--text);
        display: block;
    }
    .search-result:hover { background: var(--surface2); border-color: #3a3a3a; text-decoration: none; }
    .search-result + .search-result { border-top: 1px solid var(--border); }

    .result-path {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--accent);
        margin-bottom: 4px;
    }

    .result-matches { margin-top: 6px; }
    .match-line {
        display: flex;
        gap: 12px;
        font-family: var(--mono);
        font-size: 12px;
        padding: 2px 0;
        color: var(--text-dim);
        line-height: 1.6;
    }
    .match-lineno {
        min-width: 36px;
        text-align: right;
        color: var(--muted);
        flex-shrink: 0;
    }
    .match-text {
        white-space: pre-wrap;
        word-break: break-all;
        flex: 1;
    }
    .match-text mark {
        background: rgba(79,142,247,.25);
        color: var(--accent);
        border-radius: 2px;
        padding: 0 1px;
    }

    .empty-state {
        text-align: center;
        padding: 64px 0;
        color: var(--text-dim);
        font-size: 13px;
    }

    .search-form-inline {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 20px;
    }
    .search-form-inline input[type="text"] {
        flex: 1;
        max-width: 400px;
        padding: 7px 12px;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        color: var(--text);
        font-family: var(--sans);
        font-size: 13px;
        outline: none;
    }
    .search-form-inline input:focus { border-color: var(--accent); }
    .search-form-inline button {
        padding: 7px 16px;
        background: var(--accent);
        color: #fff;
        border: none;
        border-radius: var(--radius);
        font-family: var(--sans);
        font-size: 13px;
        cursor: pointer;
    }
    .search-form-inline button:hover { opacity: .9; }
</style>
{% endblock %}

{% block content %}
<div class="container">

    <div class="breadcrumb">
        <a href="/packages/">packages</a>
        <span class="breadcrumb-sep">/</span>
        <a href="/packages/{{ package.name }}">{{ package.name }}</a>
        <span class="breadcrumb-sep">/</span>
        <a href="/packages/{{ package.name }}/~repo">files</a>
        <span class="breadcrumb-sep">/</span>
        <span>search</span>
    </div>

    <div class="search-header">
        <h1>Search in {{ package.name }}</h1>
    </div>

    <form class="search-form-inline" method="get" action="/packages/{{ package.name }}/~repo">
        <input type="text" name="q" value="{{ query | default(value='') }}" placeholder="Search files and content…" autofocus>
        <button type="submit">Search</button>
    </form>

    {% if query %}
        <div class="result-count">
            {% if results and results | length > 0 %}
                {{ results | length }} file{% if results | length != 1 %}s{% endif %} matched "{{ query }}"
            {% else %}
                No results for "{{ query }}"
            {% endif %}
        </div>

        {% if results and results | length > 0 %}
        <div class="card" style="overflow:hidden">
            {% for result in results %}
            <div class="search-result">
                <div class="result-path">
                    <a href="/packages/{{ package.name }}/~repo/{{ result.path }}">{{ result.path }}</a>
                </div>
                {% if result.matches and result.matches | length > 0 %}
                <div class="result-matches">
                    {% for match in result.matches %}
                    <div class="match-line">
                        <span class="match-lineno">{{ match.line_number }}</span>
                        <span class="match-text">{{ match.text | escape }}</span>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--border)"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <p style="margin-top:10px">No files match <strong>"{{ query }}"</strong>.</p>
        </div>
        {% endif %}
    {% endif %}

</div>
{% endblock %}