{% load reactor %}
<div is="x-todo-list" id="{{ this.id }}" state="{{ this.serialize|tojson }}">
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        name="new_item"
        :override
        autofocus
        @keypress.enter="add"
      >
    </header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
      {% if this.items %}
        <input
          id="toggle-all"
          class="toggle-all"
          type="checkbox"
          name="toggle_all"
          {{ this.all_items_are_completed|then:'checked' }}
          @change="toggle_all"
        >
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <!-- These are here just to show the structure of the list items -->
          <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
          {% for item in this.items %}
            {% component 'x-todo-item' id=item.id item=item showing=this.showing %}
          {% endfor %}
        </ul>
      {% endif %}
    </section>

    {% if this.items %}
      <footer class="footer">

        {% with counter_id=this.id|concat:'counter' %}
          {% component 'x-todo-counter' id=counter_id items=this.items %}
        {% endwith %}

        <!-- Remove this if you don't implement routing -->
        <ul class="filters">
          <li>
            <a
              {% if this.showing == 'all' %}class="selected"{% endif %}
              @click.prevent="show {showing: 'all'}"
            >
              All
            </a>
          </li>
          <li>
            <a
              {% if this.showing == 'active' %}class="selected"{% endif %}
              @click.prevent="show {showing: 'active'}"
            >
              Active
            </a>
          </li>
          <li>
            <a
              {% if this.showing == 'completed' %}class="selected"{% endif %}
              @click="show {showing: 'completed'}"
            >
              Completed
            </a>
          </li>
        </ul>
        <!-- Hidden if no completed items are left ↓ -->
        <button class="clear-completed" @click="clear_completed">Clear completed</button>
      </footer>
    {% endif %}

</div>
