<?php


use WoWPress\Api\BattleNet;
use WoWPress\Database\Cache;
use WoWPress\Frontend\Icon;
use WoWPress\Models\Character;

global $widget_area;
set_sidebar_status('top', false);

$characters = Character::orderBy('rank')->get();
get_header();

?>
<div class="top-title flex flex-row gap-2" style="margin-top:calc(-1 * var(--wowp-gap))">
<div class="text-3xl font-bold bg-glass shadow p-3 text-center w-full">
    <?= $GLOBALS['wowpress']['page_title'] ?>
</div>
</div>

<section id="primary">
    <main id="main">
        <div class="bg-glass shadow p-auto">
            <table class="table-auto w-full">
                <thead class="bg-glass">
                    <tr>
                        <td class="p-auto">Name</td>
                        <td class="p-auto hidden lg:table-cell">Klasse</td>
                        <td class="p-auto hidden lg:table-cell">Rang</td>
                        <td class="p-auto hidden lg:table-cell">Server</td>
                        <td class="p-auto hidden lg:table-cell">Gilde</td>
                        <td class="p-auto">Aktionen</td>
                    </tr>
                </thead>
                <tbody class="bg-slate-900">
                    <?php foreach ($characters as $char) : ?>
                        <tr class="text-<?= $char->color ?> even:bg-slate-800">
                            <td class="p-auto">
                                <div class="flex flex-row gap-2 items-center">
                                    <img class="w-[42px] aspect-1 rounded-full" src="<?= $char->avatar ?>" alt="">
                                    <span><?= $char->name ?></span>
                                </div>
                            </td>
                            <td class="p-auto hidden lg:table-cell">
                                <div class="flex flex-row gap-2 items-center">
                                    <img class="w-[30px] aspect-1 rounded-full" src="<?= $char->class_icon ?>" alt="">
                                    <img class="w-[30px] aspect-1 rounded-full" src="<?= $char->spec_icon ?>" alt="">
                                    <span><?= translate_string($char->class) ?> -
                                        <?= translate_string($char->spec) ?></span>
                                </div>
                            </td>
                            <td class="p-auto hidden lg:table-cell"><?= $char->rank ?></td>
                            <td class="p-auto hidden lg:table-cell"><?= $char->realm ?></td>
                            <td class="p-auto hidden lg:table-cell"><?= $char->guild ?></td>

                            <td class="p-auto">
                                <div class="flex flex-row justify-end gap-2">
                                <form action="/request" method="POST">
                                        <?php wp_nonce_field('updateCharacter', 'updateCharacter_nonce'); ?>
                                        <input type="hidden" name="action" value="updateCharacter">
                                        <input type="hidden" name="id" value="<?=$char->ID?>">
                                        <button type="submit" class="btn btn-outline button-green"><?= Icon::get('o-arrow-path') ?></button>
                                    </form>
                                    <form action="/request" method="POST">
                                        <?php wp_nonce_field('deleteCharacter', 'deleteCharacter_nonce'); ?>
                                        <input type="hidden" name="action" value="deleteCharacter">
                                        <input type="hidden" name="id" value="<?=$char->ID?>">
                                        <button type="submit" class="btn btn-outline button-red"><?= Icon::get('o-trash') ?></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <div class="bg-glass shadow p-auto  m-auto lg:w-1/4">
            <form action="/request" method="POST">
                <div class="flex flex-col gap-2">
                    <?php wp_nonce_field('addCharacter', 'addCharacter_nonce'); ?>
                    <input type="hidden" name="action" value="addCharacter">
                    <input type="text" name="name" placeholder="Name" class="text-black">
                    <input type="text" name="realm" placeholder="Server" class="text-black">
                    <button type="submit" class="btn btn-outline btn-hunter">Hinzufügen</a>
                </div>
            </form>

        </div>
    </main><!-- #main -->
</section><!-- #primary -->

<?php
get_footer();
