<section class="flex flex-col items-center w-full py-8">
    <h2 class="py-3 text-2xl font-bold">Request a service</h2>

    <form action="/request/service" method="POST" class="max-w-lg space-y-4 font-mono">
        <div class="flex flex-col">
            <select name="type" id="type" required class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30">
                <option value="def" selected disabled>Select an option</option>
                <option value="exchange">exchange</option>
                <option value="service">service</option>
            </select>
        </div>
        
        <div class="flex flex-col">
            <label for="name">Service Name</label>
            <input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="name" id="name" required>
        </div>

        <div class="flex flex-col">
            <label for="description">Description</label>
            <textarea class="p-2 font-mono text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" name="description" id="description" cols="30" rows="5" required maxlength="500"></textarea>
        </div>
        
        
        <div class="flex flex-col">
            <label for="urls">Service URL(s)</label>
            <small class="text-white/30">*If more than one, separate with commas.</small>
            <input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="urls" id="urls" required placeholder="Awesome Exchange">
        </div>
        
        <div class="flex flex-col">
            <label for="logo_url">Logo URL</label>
            <input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="logo_url" id="logo_url" placeholder="https://i.imgur.com/wwwHfCN.jpeg" required>
        </div>
        
        <div class="flex flex-col">
            <label for="tos_urls">ToS URL(s)</label>
            <small class="text-white/30">*If more than one, separate with commas.</small>
            <input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tos_urls" id="tos_urls" required placeholder="https://example.com/terms">
        </div>
        
        <div class="flex flex-col">
            <label for="tor_urls">Tor Onion URL(s)</label>
            <small class="text-white/30">*If more than one, separate with commas.</small>
            <input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tor_urls" id="tor_urls" placeholder="http://zbiowkw...onion">
        </div>
        
        <div class="flex flex-col">
            <label for="tags">Keywords</label>
            <small class="text-white/30">*If more than one, separate with commas.</small>
            <input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tags" id="tags" required placeholder="private,p2p, fast">
        </div>

        <div class="flex flex-col items-center justify-center pt-4 space-x-2">
            <h3 class="mb-2 text-xl">Accepted currencies</h3>
            <div class="flex space-x-4">
                <span class="flex flex-col items-center justify-center">
                    <label class="text-xs uppercase" for="btc">Bitcoin</label>
                    <input
                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 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">MONERO</label>
                    <input 
                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 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">LIGHTNING</label>
                    <input 
                        class="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 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="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 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="rounded-full outline-none appearance-none bg-opacity-30 bg-zinc-900 focus:ring-0 border-lime-500 text-lime-500" 
                        type="checkbox" 
                        {{if eq "on" .Filters.Cash}}checked{{end}}
                        name="cash" 
                        id="cash"
                    >
                </span>
            </div>
        </div>

        <div class="space-y-4">
            <h3>KYC Level</h3>

            <label class="flex flex-row items-center p-2 border rounded-lg border-white/10" for="kyclevel0">
                <input type="radio" name="kyc_level" id="kyclevel0" value="0">
                <p class="ml-3"><b class="text-lime-400">Level 0</b>: No KYC ever. The ToS do not mention nor enforce any KYC/AML verification.</p>
            </label>
            <label class="flex flex-row items-center p-2 border rounded-lg border-white/10" for="kyclevel1">
                <input type="radio" name="kyc_level" id="kyclevel1" value="1">
                <p class="ml-3"><b class="text-lime-400">Level 1</b>: No KYC/AML procedures are mentioned as such, however the service reserves the right to share acquired data with authorities, block funds or reject transactions.</p>
            </label>
            <label class="flex flex-row items-center p-2 border rounded-lg border-white/10" for="kyclevel2">
                <input type="radio" name="kyc_level" id="kyclevel2" value="2" checked>
                <p class="ml-3"><b class="text-lime-400">Level 2</b>: KYC is not mandatory, but the service can require KYC from any user at any time, and it may block funds. This could occur, for example, if a transaccion is flagged suspicious.</p>
            </label>
            <label class="flex flex-row items-center p-2 border rounded-lg border-white/10" for="kyclevel3">
                <input type="radio" name="kyc_level" id="kyclevel3" value="3">
                <p class="ml-3"><b class="text-lime-400">Level 3</b>: KYC is mandatory to use certain features of the platform. Non-KYC users can be asked to verify their identity at any time, for any reason and may have their service restricted or revoked.</p>
            </label>
        </div>
        <noscript>
            <p class="my-2 font-bold text-yellow-500 uppercase">
                You need to enable JavaScript to complete this form.
            </p>
        </noscript>
        <div id="start-pow" class="flex items-center justify-center px-4 py-2 mt-2 mb-4 space-x-2 font-bold uppercase bg-blue-900 rounded-lg cursor-pointer" data-pow="{{.Pow.Id}}" data-pow-c="{{.Pow.Challenge}}" data-pow-d="{{.Pow.Difficulty}}">
            <input type="text" name="pow-nonce" id="pow-nonce" hidden required value="">
            <input type="text" name="pow-id" id="pow-id" hidden required value="{{.Pow.Id}}">
            <svg id="pow-spinner" class="hidden text-white fill-white" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ZCsl{animation:spinner_qV4G 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}.spinner_gaIW{animation-delay:.6s}@keyframes spinner_qV4G{0%{r:0;opacity:1}100%{r:11px;opacity:0}}</style><circle class="spinner_ZCsl" cx="12" cy="12" r="0"/><circle class="spinner_ZCsl spinner_gaIW" cx="12" cy="12" r="0"/></svg>
            <span id="pow-text">🧠 I'm Human</span>
        </div>
        <button id="submit-btn" class="hidden w-full px-4 py-2 my-4 space-x-2 font-bold uppercase rounded-lg cursor-pointer bg-lime-900">
            Submit
        </button>
    </form>
</section>

<script src="/static/js/pow.js"></script>
<script>
    startPow();
</script>