{{ template "base" . }}

{{ define "content" }}

<h1 style="display: none;" id="categoryId">{{.CurrentGroupId}}</h1>

<!-- 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="p-2 flex-grow-1">
    <form action="javascript:void(0);">
        <div class="container">
        <div class="row">
                <div class="col">
                    <input type="text" class="form-control" id="new-todo-text" placeholder="TODO text">
                </div>
                <div class="col">
                    <input type="datetime-local" name="new-todo-due" id="new-todo-due" placeholder="Due">
                </div>
                <div class="col">
                    <button id="new-todo-submit" class="btn btn-primary">Add</button>
                    <button class="btn btn-secondary" id="show-done">Show Done</button>
                </div>
            </div>
        </div>
    </form>
    
    <div class="container text-center">
        <table class="table table-hover">
          <thead>
            <th>ToDo</th>
            <th>Created</th>
            <th>Due</th>
            <th>Group Id</th>
          </thead>
          <tbody id="todos" class="text-break">
            {{ range .Todos }}
              <tr>
                <td>{{ .Text }}</td>
                <td>{{ .TimeCreatedUnix }}</td>
                <td>{{ .DueUnix }}</td>
                <td>{{ .GroupID }}</td>
              </tr>
            {{ end }}
          </tbody>
        </table>
    </div>
</div>
</main>

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

    let showDoneButton = document.getElementById("show-done");
    showDoneButton.addEventListener("click", (event) => {
        // 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 = "";

        let groupId = document.getElementById("categoryId").innerText;

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

{{ end }}