2_minimal_htmx/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Todo List</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

    <!-- Drop in the HTMX lib-->
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>

    <style>
      li {
        list-style-type: none !important;
      }
      input:checked + label {
        text-decoration: line-through;
      }
    </style>
</head>
<body>
    <div class="container" >
      <br>
      <!-- Sprinkle hx-boost="true" on all the things we want to be dynamic -->
        <h1>Todo <span>({{counts['done']}}/{{counts['total']}})</span></h1>
        <form action="/add" method="post" hx-boost="true" >
          <input type="text" name="title" placeholder="New task"  value="" autocomplete="off" >
          <button type="submit" value="Add" class="button-primary" role="button"  >Add</button>
        </form>
        <form action="/set_task_status" method="post" hx-boost="true" >
            <ul>
                % for task in tasks:
                <li >
                    <input type="checkbox" id="task{{task['id']}}"
                           name="task"
                           value="{{task['id']}}"
                           % if task['done']:
                           checked
                           % end
                    >
                    <label for="task{{task['id']}}">{{task['title']}}</label>
                    <a href="/delete/{{task['id']}}" hx-boost="true"  >X</a>
                </li>
                % end
            </ul>
            % if tasks:
            <button type="submit" class="button-primary">Update</button>
            % end
        </form>
    </div>
</body>
</html>