{{ template "base" . }}

{{ define "content" }}


<!-- Main -->
<main>

  <div class="d-flex flex-wrap">
    <!-- Sidebar -->
    <div id="sidebar" class="col border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary">
      <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
        <img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg">
        <span class="fs-5 fw-semibold">{{index .Translation "index categories" }}</span>
      </a>
  
      <div class="list-group list-group-flush border-bottom scrollarea">
      {{ range .Data.Groups  }}
          <a href="/group/{{.ID}}" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
            <div class="d-flex w-100 align-items-center justify-content-between">
              <strong class="mb-1">{{ .Name }}</strong>
              <small>{{ .TimeCreated }}</small>
            </div>
            {{ if not .Removable }}
              <div class="col-10 mb-1 small">{{index $.Translation "index not removable" }}</div>
            {{ end }}
          </a>
      {{ end }}
      </div>
  
  
      <div class="input-group mb-3 py-md-5">
        <input type="text" name="newCategory"aria-label="Category Name" aria-describedby="button-new-category" class="form-control" id="new-category-input" placeholder="Category Name">
        <button id="button-new-category" onclick="createNewCategory();" class="btn btn-primary">Create</button >
      </div>
    </div>
  
    <!-- Groups -->
    <div class="d-flex flex-column flex-grow-1 flex-md-row p-4 gap-4 py-md-5">
    <div class="list-group flex-grow-1">
      {{ range .Data.Groups }}
        <div class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
          <a href="/group/{{.ID}}" class="list-group-item list-group-item-action d-flex gap-3 py-3">
            <img src="/static/images/box-arrow-up-right.svg" alt="Go to this category" width="32" height="32">
            <div class="d-flex gap-2 w-100 justify-content-between">
              <div>
                <h6 class="mb-0">{{ .Name }}</h6>
                <p class="mb-0 opacity-75">{{ index $.Translation "index jump here"}}</p>
              </div>
              <small class="opacity-50 text-nowrap">{{ .TimeCreated }}</small>
            </div>
          </a>
          {{ if .Removable }}
          <div class="small">
            <button class="btn btn-danger" onclick="deleteCategoryRefresh('{{.ID}}')">
              <img src="/static/images/trash3-fill.svg" alt="Remove category">
            </button>
          </div>
          {{ end }}
        </div>
      {{ end }}
    </div>
    </div>
  </div>
  </main>  


<script>
    async function createNewCategory() {
      let categoryInput = document.getElementById("new-category-input");
      let newCategoryName = categoryInput.value;
      if (newCategoryName.length < 1) {
        categoryInput.setCustomValidity("At least one character is needed!");
        return;
      } else {
        categoryInput.setCustomValidity("");
      }
      categoryInput.value = "";
    
      // Post new category and refresh
      await postNewGroup({
        Name: newCategoryName
      });
    
      window.location.reload();
    }
    
    async function deleteCategoryRefresh(id) {
      await deleteCategory(id);
      window.location.reload();
    }
    </script>
    
{{ end }}