implemented user lists

src/templates/pages/key-manager.php

@@ -2,15 +2,44 @@
 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())) ?>" />
 
-<h1>My Keys</h1>
+<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)): ?>
+        <select name="lists" id="list-select" class="form-select w-100">
+            <?php foreach ($usersLists as $list): ?>
+            <option value="<?= $list->getId() ?>"><?= $list->getName() ?></option>
+            <?php endforeach; ?>
+            <option value="_create">+ Create New</option>
+        </select>
+        <?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">
@@ -22,6 +51,11 @@ $this->layout('layout/main', [ 'resourceEntry' => 'keys' ]);
             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">
@@ -65,4 +99,45 @@ $this->layout('layout/main', [ 'resourceEntry' => 'keys' ]);
             </button>
         </div>
     </div>
-</div>
+    <div class="tab-pane fade" id="share-tab-pane" role="tabpanel">
+        <h2>
+            Share your list
+        </h2>
+
+        <label for="share-user-search">Search for a user...</label>
+        <div class="input-group">
+            <input type="text" class="form-control" id="share-user-search" placeholder="">
+            <button class="btn btn-primary js--search-shared-user">Search</button>
+        </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>
+
+<?php $this->end() ?>