{{define "title"}}Twister — Search Tangled{{end}}
{{define "head"}}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{{end}}
{{define "content"}}
<div x-data="searchApp()" x-init="initFromURL()">
  <section class="search-hero">
    <h1>Search Tangled</h1>
    <form class="search-form" @submit.prevent="doSearch(true)">
      <input type="text" x-model="query" placeholder="Search repos, issues, PRs, profiles&hellip;" class="search-input" autofocus>
      <button type="submit" class="btn btn-primary">Search</button>
    </form>
    <div class="filter-bar">
      <select x-model="filters.type" @change="doSearch(true)">
        <option value="">All types</option>
        <option value="repo">Repos</option>
        <option value="issue">Issues</option>
        <option value="pull">Pull Requests</option>
        <option value="profile">Profiles</option>
        <option value="string">Strings</option>
        <option value="star">Stars</option>
      </select>
      <input type="text" x-model="filters.author" placeholder="Author" @keydown.enter="doSearch(true)" class="filter-input">
      <input type="text" x-model="filters.language" placeholder="Language" @keydown.enter="doSearch(true)" class="filter-input">
      <select x-model="filters.state" @change="doSearch(true)">
        <option value="">Any state</option>
        <option value="open">Open</option>
        <option value="closed">Closed</option>
        <option value="merged">Merged</option>
      </select>
    </div>
  </section>

  <section class="results">
    <template x-if="error">
      <div class="msg msg-error" x-text="error"></div>
    </template>
    <template x-if="!error && !searched && !loading">
      <div class="msg msg-empty">
        <p>Search indexed Tangled records.</p>
        <p>
          If a record is missing, fetch it through the API to index it for search.
          Try
          <a href="/actors/desertthunder.dev" target="_blank" rel="noopener">
            <code>GET /actors/desertthunder.dev</code>
          </a>.
        </p>
      </div>
    </template>
    <template x-if="!error && searched && results.length === 0">
      <div class="msg msg-empty">
        <p>No results found.</p>
        <p>
          Fetching a resource through the API will index it for search.
          Try
          <a href="/actors/desertthunder.dev" target="_blank" rel="noopener">
            <code>GET /actors/desertthunder.dev</code>
          </a>
          and search again.
        </p>
      </div>
    </template>
    <template x-for="r in results" :key="r.id">
      <div class="result-shell">
        <article class="card">
          <div class="card-head">
            <span class="badge" x-text="r.record_type"></span>
            <span class="card-title" x-text="r.title || r.id"></span>
          </div>
          <div class="card-snippet" x-show="r.body_snippet" x-html="r.body_snippet"></div>
          <div class="card-snippet" x-show="!r.body_snippet && r.summary" x-text="r.summary"></div>
          <div class="card-meta">
            <span x-show="r.author_handle" x-text="r.author_handle"></span>
            <span x-show="r.repo_name" class="meta-sep" x-text="r.repo_name"></span>
            <span x-show="r.updated_at" class="meta-sep" x-text="relTime(r.updated_at)"></span>
          </div>
          <div class="card-actions">
            <a
              x-show="resultURL(r)"
              :href="resultURL(r)"
              target="_blank"
              rel="noopener"
              class="btn btn-card"
            >Open on Tangled</a>
            <button
              x-show="r.at_uri"
              type="button"
              class="btn btn-card"
              @click="copyATURI(r)"
            >Copy AT URI</button>
            <a
              x-show="r.at_uri"
              :href="pdsURL(r)"
              target="_blank"
              rel="noopener"
              class="btn btn-card"
            >Open in pds.ls</a>
            <a
              :href="jsonURL(r)"
              target="_blank"
              rel="noopener"
              class="btn btn-card"
            >View JSON</a>
          </div>
          <div x-show="warningMessage(r)" class="card-warning" role="note">
            <strong class="warning-title" x-text="warningMessage(r)"></strong>
            <code x-show="r.at_uri" class="warning-uri" x-text="r.at_uri"></code>
          </div>
        </article>
      </div>
    </template>
    <template x-if="hasMore">
      <button class="btn btn-more" @click="loadMore()" x-text="loading ? 'Loading\u2026' : 'Load more'" :disabled="loading"></button>
    </template>
  </section>
  <div class="toast" :class="{ 'toast-visible': toastVisible }" x-show="toastVisible" x-transition.opacity.duration.150ms>
    <span x-text="toastMessage"></span>
  </div>
</div>
{{end}}
{{define "scripts"}}
<script src="/static/search.js"></script>
{{end}}
{{template "layout" .}}