{{ 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>{{ .TimeCreatedUnix }}</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>
</main>

<script>
// function todoBlock(todo, editable) {
//   let todoCompleteBtnID = "btn-complete-" + String(todo.id);
//   let todoDeleteBtnID = "btn-delete-" + String(todo.id);
//   let todoEditBtnID = "btn-edit-" + String(todo.id);

//   // Display
//   let timeCreated = new Date(todo.timeCreatedUnix * 1000);

//   return "<tr><td>" +  todo.text + "</td>" +
//       "<td>" + " " + 
//       timeCreated.getDate() + "/" + 
//       (timeCreated.getMonth() + 1) + "/" + 
//       timeCreated.getFullYear() + "</td>" +
//       "<td><button class='btn btn-success' id='" + todoCompleteBtnID + "'>" + 
//       "<img src='/static/images/check.svg'></button><button class='btn btn-danger' id='" +
//       todoDeleteBtnID + "'><img src='/static/images/trash3-fill.svg'></button></td></tr>";
// }

// async function displayTodos(showDone) {
//     // Fetch and display TODOs
//     let response = await getTodos();
//     if (!response.ok) {
//       // window.location.replace("/error")
//       return;
//     }

//     let todosJson = await response.json();    
//     if (todosJson == null) {  
//       return;
//     }

//     let todosDisplayed = [];
//     let todosDiv = document.getElementById("todos");
//     // Clear what we've had before
//     todosDiv.innerHTML = "";

//     todosJson.forEach((item) => {
//       let todoBlk = todoBlock(item, item.isDone);
//       todosDiv.innerHTML += todoBlk;
//     });
// }


// document.addEventListener('DOMContentLoaded', async function() {
//     document.getElementById("new-todo-text").focus();

//     let showDoneButton = document.getElementById("show-done");
//     showDoneButton.addEventListener("click", (event) => {
//         displayTodos(true); // Re-display without reloading

//         // Rename the button
//         showDoneButton.innerText = "Show To Do";
//         showDoneButton.className = "btn btn-success";
        
//         // Make it "reset to default"
//         showDoneButton.addEventListener("click", (event) => {
//             location.reload();
//         });
//     });


//     // "Add" button
//     document.getElementById("new-todo-submit").addEventListener("click", async (event) => {
//         let newTodoTextInput =  document.getElementById("new-todo-text");
//         let newTodoText = newTodoTextInput.value;
//         if (newTodoText.length < 1) {
//             newTodoTextInput.setCustomValidity("At least one character is needed!");
//             return;
//         } else {
//             newTodoTextInput.setCustomValidity("");
//         }
//         newTodoTextInput.value = "";

//         // Make a request
//         let response = await postNewTodo({text: newTodoText, groupId: groupId});
//         if (response.ok) {
//             location.reload();
//         }
//     });


//     // Fetch and display TODOs
//     await displayTodos(false);
// }, false)
</script>

{{ end }}