<?= $this->layout('_layout', ['title' => $title]); ?>

<main class="main">
  <?= $this->insert('includes/aside_info') ?>
  <div class="content">
    <div class="h2-title h2-title-content flex-s-c">
      <span><?= $title_shopping ?></span>
    </div>

    <div class="flex justify-between gap-10 mt-4 items-start">
      <?php if (__login()) : ?>
        <div>
          <ul class="flex-c-c gap-10">
            <?php foreach (web()->shopping_groups as $group) : ?>
              <li><a class="button" href="<?= __redirect("shop/{$category}/{$group['group']}") ?>"><?= $group['name'] ?></a></li>
            <?php endforeach; ?>
          </ul>
        </div>

        <div class="detail-item">
          <form action="<?= __redirect("shopping/buy/item") ?>" method="post">
            <input type="hidden" name="id_item" value="<?= base64_encode($details->id) ?>">
            <div class="flex gap-10 j-center align-start">
              <div class="image-item">
                <img src="<?= __resources("items/{$details->image}") ?>" alt="" class="w-24 h-24 object-contain m-auto">
                <p class="p-1 bg-neutral-200 rounded-xs text-xs text-neutral-900 mb-1 relative">Nome: <?= $details->name ?></p>
                <p class="p-1 bg-neutral-200 rounded-xs text-xs text-neutral-900 relative">Classe: <?= $details->class ?></p>
              </div>

              <div class="details-item">
                <div class="fields">
                  <div class="fieldGroup">
                    <span>Select an option</span>
                    <select id="countries" name="level">
                      <option value="0">+0</option>
                      <option value="1">+1</option>
                      <option value="2">+2</option>
                      <option value="3">+3</option>
                      <option value="4">+4</option>
                      <option value="5">+5</option>
                      <option value="6">+6</option>
                      <option value="7">+7</option>
                      <option value="8">+8</option>
                      <option value="9">+9</option>
                      <option value="10">+10</option>
                      <option value="11">+11</option>
                      <option value="12">+12</option>
                      <option value="13">+13</option>
                      <option value="14">+14</option>
                      <option value="15">+15</option>
                    </select>
                  </div>
                  <?= $this->insert("partials/shopping/partials/excelents", ['group' => $details->section, 'name' => $details->name]) ?>
                  <?= $this->insert("partials/shopping/partials/ancient", ['group' => $group_item, 'category' => $category]) ?>
                  <?= $this->insert("partials/shopping/partials/item380", ['group' => $group_item, 'category' => $category]) ?>
                  <?= $this->insert("partials/shopping/partials/harmony", ['group' => $group_item, 'category' => $category]) ?>
                  <?= $this->insert("partials/shopping/partials/socket", ['group' => $group_item, 'category' => $category]) ?>
                </div>
                <center><button>Comprar item</button></center>
              </div>
            </div>
          </form>
        </div>
      <?php else : ?>
        <div class="p-1 bg-yellow-300 text-sm rounded-full text-black text-center w-full">Você precisa estar logado em sua conta, para continuar com a compra</div>
      <?php endif; ?>

    </div>

  </div>
</main>