{{#> layout }}
<script>
    window.addEventListener("DOMContentLoaded", function () {
        let users = document.getElementById("users");
        if (users) {
            users.addEventListener("change", async function (event) {
                const action = event.target.getAttribute("action");
                if (action) {
                    console.log(action, event.target.checked);
                    const response = await fetch(action, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ admin: event.target.checked })
                    });
                }
            });
        }
    });
</script>

<div class="h-screen text-white border-r border-white text-main font-extralight">
    <div class="flex flex-row items-center justify-between p-5 border-b border-white pl-7 pr-7 admin-nav">
        <h1 class="font-display font-extralight">Admin</h1>
        <ul class="flex flex-row">
            <li><a href="#userlist" class="mr-4 leading-loose no-underline lowercase text-main hover:underline">Users</a></li>
            <li><a href="#signuplist" class="leading-loose no-underline lowercase text-main hover:underline">Signups</a></li>
        </ul>
    </div>

    <h2 id="userlist" class="pt-10 mb-5 text-white pl-7 pr-7 font-display font-extralight">Users</h2>
    
    <div class="flex flex-col w-full pb-5 font-mono text-xs" id="users">
        <div class="flex flex-row pl-5 pr-10 font-bold">
            <p class="w-1/3 p-2">Github Username</p>
            <p class="w-32 p-2 text-center">Admin</p>
            <p class="w-24 p-2"> </p>
        </div>
        <div class="flex flex-col pl-5 pr-10 text-gray-100">
            <form action="/users" method="post" class="m-0">
                <div class="flex flex-row items-center">
                    <p class="w-1/3 p-2"><input class="block w-full p-2 text-xs bg-transparent border border-white" type="text" name="github_login" required minlength="4" placeholder="@github_handle"></p>
                    <p class="w-32 p-2 text-center"><input type="checkbox" id="admin" name="admin" value="true"></p>
                    <p class="w-24 p-2"><button class="underline hover:no-underline">Add</button></p>
                </div>
            </form>
        </div>
    </div>
    
    <div class="flex flex-col w-full pb-10 font-mono text-xs border-b border-white">
        <div class="flex flex-row pl-5 pr-10 font-bold">
            <p class="w-1/3 p-2">Github Username</p>
            <p class="w-32 p-2 text-center">Admin</p>
            <p class="w-24 p-2"> </p>
        </div>
        {{#each users}}
        <div class="flex flex-col pl-5 pr-10 text-gray-100 alternate-bg">
            <form action="/users/{{id}}/delete" method="post" class="m-0">
                <div class="flex flex-row items-center">
                    <p class="w-1/3 p-2">{{github_login}}</p>
                    <p class="w-32 p-2 text-center"><input action="/users/{{id}}" type="checkbox" {{#if admin}}checked{{/if}}></p>
                    <p class="w-24 p-2"><button class="underline hover:no-underline">Remove</button></p>
                </div>
            </form>
        </div>
        {{/each}}
    </div>

    <h2 class="pt-10 mb-5 text-white pl-7 pr-7 font-display font-extralight">Signups</h2>

    <div class="flex flex-col w-full pb-10 font-mono text-xs border-b border-white">
        
        <div class="flex flex-row justify-between pl-5 pr-10 font-bold">
            <p class="w-1/5 p-2">Email</p>
            <p class="w-1/5 p-2">Github</p>
            <p class="w-24 p-2 text-center">Releases</p>
            <p class="w-24 p-2 text-center">Updates</p>
            <p class="w-24 p-2 text-center">Community</p>
            <p class="w-24 p-2 text-right">Remove</p>
        </div>
        {{#each signups}}
        <div class="flex flex-col pb-1 pl-5 pr-10 text-gray-100 alternate-bg">
            <form action="/signups/{{id}}/delete" method="post" class="m-0">
                <div class="flex flex-row items-center justify-between">
                    <p class="w-1/5 p-2 pb-1">{{email_address}}</p>
                    <p class="w-1/5 p-2 pb-1">{{github_login}}</p>
                    <p class="w-24 p-2 pb-1 text-center">{{#if wants_releases}}[✓]{{else}}[ ]{{/if}}</p>
                    <p class="w-24 p-2 pb-1 text-center">{{#if wants_updates}}[✓]{{else}}[ ]{{/if}}</p>
                    <p class="w-24 p-2 pb-1 text-center">{{#if wants_community}}[✓]{{else}}[ ]{{/if}}</p>
                    <p class="w-24 p-2 pb-1 text-right"><button class="text-lg text-gray-500 hover:text-white">×</button></p>
                </div>
            </form>
            <p class="max-w-full p-2 pt-0 overflow-hidden leading-normal text-gray-400 max-h-5 whitespace-nowrap overflow-ellipsis" title="{{about}}">{{about}}</p>
        </div>
        {{/each}}
    </div>
</div>
{{/layout}}