101 lines
5.4 KiB
PHP
101 lines
5.4 KiB
PHP
<?php
|
|
|
|
use WoWPress\Frontend\Icon;
|
|
use WoWPress\Frontend\ToggleButton;
|
|
|
|
?>
|
|
|
|
<div class="flex flex-row" x-data="{open : false}">
|
|
<button x-on:click="open = true" class="btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button>
|
|
<div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div>
|
|
<div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div>
|
|
<template x-teleport="body">
|
|
<div x-show="open" class="fixed inset-0 px-2 z-10 overflow-hidden flex items-center justify-center">
|
|
<div x-show="open" x-on:click="open = false" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-deepblue bg-opacity-75 transition-opacity"></div>
|
|
<!-- Modal Content -->
|
|
<div x-show="open" x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="transform scale-75" x-transition:enter-end="transform scale-100" x-transition:leave="transition-transform ease-in duration-300" x-transition:leave-start="transform scale-100" x-transition:leave-end="transform scale-75" class="bg-glass shadow overflow-hidden max-w-md w-full sm:w-96 md:w-1/2 lg:w-2/3 xl:w-1/3 z-50">
|
|
<!-- Modal Body -->
|
|
<form action="">
|
|
<div class="grid grid-cols-2 gap-auto p-auto">
|
|
<button class="col-span-2 btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button>
|
|
<div class="col-span-2 text-center">Anwesenheit</div>
|
|
<?= (new ToggleButton([
|
|
'type' => 'radio',
|
|
'name' => 'raid_status',
|
|
'text' => 'Anwesend',
|
|
'color' => 'monk',
|
|
'icon_yes' => 'o-check-circle',
|
|
'checked' => true,
|
|
'row' => false,
|
|
]))->render() ?>
|
|
<?= (new ToggleButton([
|
|
'type' => 'radio',
|
|
'name' => 'raid_status',
|
|
'text' => 'Abwesend',
|
|
'color' => 'deathknight',
|
|
'icon_yes' => 'o-x-circle',
|
|
'row' => false,
|
|
]))->render() ?>
|
|
<?= (new ToggleButton([
|
|
'type' => 'radio',
|
|
'name' => 'raid_status',
|
|
'text' => 'Ersatzbank',
|
|
'color' => 'druid',
|
|
'icon_yes' => 'o-question-mark-circle',
|
|
'row' => false,
|
|
]))->render() ?>
|
|
<?= (new ToggleButton([
|
|
'type' => 'radio',
|
|
'name' => 'raid_status',
|
|
'text' => 'Verspätet',
|
|
'color' => 'demonhunter',
|
|
'icon_yes' => 'o-clock',
|
|
'row' => false,
|
|
]))->render() ?>
|
|
<div class="col-span-2 text-center">Rolle</div>
|
|
<?= (new ToggleButton([
|
|
'type' => 'radio',
|
|
'name' => 'raid_role',
|
|
'text' => 'Tank',
|
|
'color' => 'priest',
|
|
'icon_yes' => 'o-shield-exclamation',
|
|
'row' => false,
|
|
]))->render() ?>
|
|
<?= (new ToggleButton([
|
|
'type' => 'radio',
|
|
'name' => 'raid_role',
|
|
'text' => 'Heal',
|
|
'color' => 'priest',
|
|
'icon_yes' => 'o-heart',
|
|
'row' => false,
|
|
]))->render() ?>
|
|
<?= (new ToggleButton([
|
|
'type' => 'radio',
|
|
'name' => 'raid_role',
|
|
'text' => 'Ranged',
|
|
'color' => 'priest',
|
|
'icon_yes' => 'o-bolt',
|
|
'checked' => true,
|
|
'row' => false,
|
|
]))->render() ?>
|
|
<?= (new ToggleButton([
|
|
'type' => 'radio',
|
|
'name' => 'raid_role',
|
|
'text' => 'Melee',
|
|
'color' => 'priest',
|
|
'icon_yes' => 'o-hand-raised',
|
|
'row' => false,
|
|
]))->render() ?>
|
|
</div>
|
|
<!-- Modal Footer -->
|
|
<div class="border-t p-auto">
|
|
<button x-on:click="open = false" class="btn btn-outline btn-monk w-full">
|
|
<?= Icon::get('o-paper-airplane') ?>
|
|
<span>Status Speichern</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|