dela/pages/index.html

{{ template "base" . }}

{{ define "content" }}

<!-- Main -->
<main class="d-flex flex-wrap">

<!-- Sidebar -->
<div id="sidebar" class="flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
    <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
      <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
      <span class="fs-5 fw-semibold">Categories</span>
    </a>
    {{ range .Groups  }}
      <div class="list-group list-group-flush border-bottom scrollarea">
        <a href="/group/{{.ID}}" class="list-group-item list-group-item-action active 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>
          <div class="col-10 mb-1 small">Is removable: {{ .Removable }}</div>
        </a>
      </div>
    {{ end }}
</div>

<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
  <div class="list-group">
    {{ range .Groups }}
    <a href="/group/{{.ID}}" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
      <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">Jump here</p>
        </div>
        <small class="opacity-50 text-nowrap">{{ .TimeCreatedUnix }}</small>
      </div>
    </a>
    {{ end }}
  </div>

  <div>
    <label for="newCategory">New category</label>
    <input type="text" name="newCategory" id="new-category-input" placeholder="Category Name">
    <input type="submit" value="Create" onclick="createNewCategory();">
  </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();
}
</script>

{{ end }}