<main class="py-4 text-lime-500">
    <div class="px-4 py-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>

    <!-- Filters -->
    <div class="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>

    <form action="/">
        <input type="hidden" name="t" id="t" value="{{.Filters.Type}}"/>
        <div class="flex items-center justify-center mt-6">
            <input class="text-xs bg-transparent border rounded-lg border-lime-500/60 text-lime-500 placeholder-white/30" placeholder="Search anything..." value="{{.Filters.Query}}" type="text" name="q" id="q">
        </div>
    
        <div class="flex items-center justify-center pt-4 space-x-2">
            <span class="flex flex-col items-center justify-center">
                <label class="text-xs uppercase" for="btc">btc</label>
                <input
                    class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500" 
                    type="checkbox"
                    {{if eq "on" .Filters.Btc}}checked{{end}}
                    name="btc" 
                    id="btc"
                >
            </span>
            <span class="flex flex-col items-center justify-center">
                <label class="text-xs uppercase" for="xmr">xmr</label>
                <input 
                    class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500" 
                    type="checkbox"
                    {{if eq "on" .Filters.Xmr}}checked{{end}}
                    name="xmr" 
                    id="xmr"
                >
            </span>
            <span class="flex flex-col items-center justify-center">
                <label class="text-xs uppercase" for="ln">ln</label>
                <input 
                    class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500" 
                    type="checkbox"
                    {{if eq "on" .Filters.Ln}}checked{{end}}
                    name="ln" 
                    id="ln"
                >
            </span>
            <span class="flex flex-col items-center justify-center">
                <label class="text-xs uppercase" for="fiat">fiat</label>
                <input 
                    class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500" 
                    type="checkbox" 
                    {{if eq "on" .Filters.Fiat}}checked{{end}}
                    name="fiat" 
                    id="fiat"
                >
            </span>
            <span class="flex flex-col items-center justify-center">
                <label class="text-xs uppercase" for="cash">cash</label>
                <input 
                    class="bg-transparent rounded-full outline-none appearance-none focus:ring-0 border-lime-500/60 text-lime-500" 
                    type="checkbox" 
                    {{if eq "on" .Filters.Cash}}checked{{end}}
                    name="cash" 
                    id="cash"
                >
            </span>
            <button class="p-1 text-xs font-bold uppercase border rounded-lg bg-none border-lime-500/60" type="submit">filter</button>
        </div>
    </form>
    <!-- End Filters -->
</main>

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