gamesshop/src/templates/pages/key-manager.php

<?php
declare(strict_types=1);

use GamesShop\Entities\Games\KeyAttribute;
use GamesShop\Entities\GamesList;
use League\Plates\Template\Template;

assert($this instanceof Template);

/** @var GamesList[] $usersLists */

$this->layout('layout/main', [ 'resourceEntry' => 'keys' ]);
?>
<meta name="key-attributes" content="<?= htmlspecialchars(json_encode(KeyAttribute::casesAsAssociative())) ?>" />

<div class="row">
    <div class="col-sm-6">
        <h1>My Keys</h1>
    </div>
    <div class="col-sm-6 align-self-center">
        <?php if (!empty($usersLists)): ?>
        <div class="input-group w-100">
            <select name="lists" id="list-select" class="form-select">
                <?php foreach ($usersLists as $list): ?>
                    <option value="<?= $list->getId() ?>"><?= $list->getName() ?></option>
                <?php endforeach; ?>
                <option value="_create">+ Create New</option>
            </select>
            <button class="btn btn-outline-secondary" data-bs-target="#edit-list-modal" data-bs-toggle="modal">
                <i class="fa-solid fa-gear"></i>
            </button>
        </div>
        <?php endif; ?>
    </div>
</div>
<?php if (empty($usersLists)): ?>

<div class="text-center">
    <p class="fs-4 mb-4">You don't have a key list. Create one here.</p>

    <button class="btn btn-primary btn-lg js--create-list-button">
        Create
    </button>
</div>

<?php else: ?>

<ul id="key-tab" class="nav nav-tabs">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#keys-tab-pane" role="tab">
            Keys
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#import-tab-pane" role="tab">
            Import
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#share-tab-pane" role="tab">
            Share
        </button>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="keys-tab-pane" role="tabpanel">
        <table class="table table-striped key-table">
            <thead>
                <tr>
                    <th></th>
                    <th>Game Name</th>
                    <th>Amount Keys</th>
                    <th>IGDB State</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="tab-pane fade" id="import-tab-pane" role="tabpanel">
        <h2>Importer</h2>
        <label for="formFile" class="form-label mt-3">Insert import file:</label>

        <div class="mb-3 input-group">
            <input class="form-control" type="file" id="import" accept="text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
            <button class="btn btn-primary js--send-import">Send</button>
        </div>

        <div class="d-none" id="import-info-container">
            <h3>Import Details:</h3>

            <table class="table table-striped w-100" id="import-attribute-table">
                <thead>
                    <tr>
                        <th>Column</th>
                        <th>Header</th>                        <th>Attribute</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <button class="btn btn-primary js--do-import">
                Import
            </button></div>
    </div>
    <div class="tab-pane fade" id="share-tab-pane" role="tabpanel">
        <h2>
            Share your list
        </h2>

        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="public-switch" <?= $list->isPublic() ? "checked" : "" ?>>
            <label class="form-check-label" for="public-switch">Is public</label>
        </div>

        <div class="share-content">
            <label for="share-user-search">Search for a user...</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="share-user-search" placeholder="">
                <button class="btn btn-primary js--adds-user">+ Add</button>
            </div>

            <h3>Users shared to</h3>
            <table id="shared-users-table" class="table table-striped w-100">
                <thead>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>
</div>

<?php endif; ?>

<?php $this->start('modal') ?>

<div class="modal" id="create-list-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title h3">
                    Create list
                </h1>
            </div>
            <div class="modal-body">
                <div class="form-floating">
                    <input class="form-control" type="text" id="createListName" placeholder="">
                    <label for="createListName">Name</label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary js--create-list">Create</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="edit-list-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title h3">
                    Edit <span class="list-name"></span>
                </h1>
            </div>
            <div class="modal-body">
                <h2 class="h4 mt-2">
                    Actions
                </h2>
                <button data-bs-toggle="modal" data-bs-target="#delete-list-modal" class="w-100 btn btn-danger">Delete List</button>
            </div>
            <div class="modal-footer">
                <button data-bs-dismiss="modal" class="flex-grow-1 btn btn-primary">
                    Save
                </button>
            </div>
        </div>
    </div>
</div>


<div class="modal" id="delete-list-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title h3">
                    Delete <span class="list-name"></span>?
                </h1>
            </div>
            <div class="modal-body">
                <p>
                    Are you <b>sure</b> you want to <b class="text-danger">delete</b> this list?
                </p>
                <p>
                    Deleting this will remove all the keys you added from the database.
                </p>
            </div>
            <div class="modal-footer">
                <button data-bs-dismiss="modal" class="flex-grow-1 btn btn-outline-primary">
                    Cancel
                </button>
                <button data-bs-dismiss="modal" class="js--yes flex-grow-1 btn btn-danger">
                    Yes
                </button>
            </div>
        </div>
    </div>
</div>

<?php $this->end() ?>