{{if .Announcement}}
    <div class="flex justify-center items-center mt-4 w-full">
        <a target="_blank" href="{{.Announcement.Link}}"
            class="flex justify-center items-center p-2 mx-auto space-x-2 max-w-sm rounded-lg border {{if .Announcement.Warning}}border-yellow-900{{else}} border-lime-900{{end}}  bg-black/30">
            {{if .Announcement.Warning}}
            <svg xmlns="http://www.w3.org/2000/svg"  class="text-yellow-600 size-5" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z" stroke-width="0" fill="currentColor" />
            </svg>
            {{else}}
            <svg xmlns="http://www.w3.org/2000/svg" class="text-lime-600 size-5" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <circle cx="12" cy="12" r="9" />
                <line x1="12" y1="8" x2="12.01" y2="8" />
                <polyline points="11 12 12 12 12 16 13 16" />
            </svg>
            {{end}}

            <div class="flex flex-col justify-center items-center text-center">
                <span class="font-bold">{{.Announcement.Title}}</span>
                <span class="text-xs lowercase">{{.Announcement.Body}}</span>
            </div>
        </a>
    </div>
{{end}}


<main class="py-4 text-lime-500">
    <div class="px-4 pt-2">
        <div class="mb-2 text-center bg-transparent md:grid">
            <p class="font-mono text-sm font-bold uppercase md:text-base">{{.RandomPitch}}</p>
        </div>
    </div>

    <!-- End Filters -->
    <form action="/">
        <input type="hidden" name="t" id="t" value="{{.Filters.Type}}" />
        <div class="flex justify-center items-center mt-4">
            <input
                class="text-xs text-lime-500 bg-transparent rounded-lg border border-lime-500/60 placeholder-white/30"
                placeholder="Search anything..." value="{{.Filters.Query}}" type="text" name="q" id="q">
        </div>

        <div class="flex justify-center items-center pt-2.5 space-x-2">
            <span class="flex flex-col justify-center items-center">
                <label class="text-xs uppercase" for="btc">btc</label>
                <input
                    class="text-lime-500 bg-transparent rounded-full appearance-none outline-none focus:ring-0 border-lime-500/60"
                    type="checkbox" {{if eq "on" .Filters.Btc}}checked{{end}} name="btc" id="btc">
            </span>
            <span class="flex flex-col justify-center items-center">
                <label class="text-xs uppercase" for="xmr">xmr</label>
                <input
                    class="text-lime-500 bg-transparent rounded-full appearance-none outline-none focus:ring-0 border-lime-500/60"
                    type="checkbox" {{if eq "on" .Filters.Xmr}}checked{{end}} name="xmr" id="xmr">
            </span>
            <span class="flex flex-col justify-center items-center">
                <label class="text-xs uppercase" for="ln">ln</label>
                <input
                    class="text-lime-500 bg-transparent rounded-full appearance-none outline-none focus:ring-0 border-lime-500/60"
                    type="checkbox" {{if eq "on" .Filters.Ln}}checked{{end}} name="ln" id="ln">
            </span>
            <span class="flex flex-col justify-center items-center">
                <label class="text-xs uppercase" for="fiat">fiat</label>
                <input
                    class="text-lime-500 bg-transparent rounded-full appearance-none outline-none focus:ring-0 border-lime-500/60"
                    type="checkbox" {{if eq "on" .Filters.Fiat}}checked{{end}} name="fiat" id="fiat">
            </span>
            <span class="flex flex-col justify-center items-center">
                <label class="text-xs uppercase" for="cash">cash</label>
                <input
                    class="text-lime-500 bg-transparent rounded-full appearance-none outline-none focus:ring-0 border-lime-500/60"
                    type="checkbox" {{if eq "on" .Filters.Cash}}checked{{end}} name="cash" id="cash">
            </span>
            <button class="p-1 text-xs font-bold uppercase bg-none rounded-lg border border-lime-500/60"
                type="submit">filter</button>
        </div>
    </form>

    <div class="mt-3 text-center text-gray-500">
        <a href="/">
            <span
                class="p-1 {{if eq "" .Filters.Type}}border-b border-lime-500/60 text-lime-500{{end}} text-xs">All</span>
        </a>
        <a href="/?t=exchange">
            <span class="p-1 {{if eq "exchange" .Filters.Type}}border-b border-lime-500/60 text-lime-500{{end}}
                text-xs">Exchanges</span>
        </a>
        <a href="/?t=service">
            <span class="p-1 {{if eq "service" .Filters.Type}}border-b border-lime-500/60 text-lime-500{{end}}
                text-xs">Services</span>
        </a>
    </div>
    <!-- Filters -->
</main>

<!-- Services list -->
<section class="flex justify-center items-center px-3 pb-12 mt-4">
    <div class="grid grid-cols-1 gap-3 max-w-6xl md:grid-cols-3 lg:grid-cols-3">
        {{range .Services}}
        {{partial "partials/service_card" .}}
        {{end}}
    </div>
</section>