<?= $this->layout('_theme', ['title' => $title, 'subtitle' => 'Adicionar moeda']); ?>

<div class="p-4 bg-gray-100 rounded-lg">
    <form action="<?= __redirect('administration/auth/account/add/coin') ?>">
        <div>
            <p class="px-1 py-3 text-[13px]">Adicionar através </p>
            <select class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" name="type">
                <option value="account">- Login</option>
                <option value="character">- Character</option>
            </select>
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Login/Nome do personagem </p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="account" placeholder="Login ou nome do personagem do player" maxlength="10">
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Moedas </p>
            <ul class="items-center w-full text-[13px] font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <?php foreach ($coins as $key => $coin) : ?>
                    <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                        <div class="flex items-center pl-3">
                            <input id="<?= $key ?>" type="radio" <?= $key == 0 ? 'checked' : '' ?> value="<?= $key ?>" name="coin" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                            <label for="<?= $key ?>" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900"><?= $coin['name_coin'] ?></label>
                        </div>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Quantidade </p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="amount" placeholder="Valor a adicionar" maxlength="5">
        </div>

        <button class="rounded-lg py-3 px-6 bg-sky-500 text-white block mt-4 mx-auto text-sm border-2 border-sky-400 hover:bg-sky-700 transition ease-in-out duration-500" type="submit">Salvar</button>
    </form>
</div>