<div class="row">
    {% if title is not empty %}
        <div class="col-12">
            <h1 class="text-center mb-5">{{ title }}</h1>
        </div>
    {% endif %}
</div>


<div class="row mb-3 d-flex align-items-center">
  <div class="col-8  col-md-8 mb-5">
    <input class="form-control ml-3" id="add_todo_input" type="text" placeholder="Todo hinzufügen...">
  </div>
  <div class="col-4 col-md-4 d-flex  mb-5">
    <button id="add_todo_btn" class="btn btn-primary" type="button" name="add_todo_btn">Hinzufügen</button>
  </div>


  <div class="w-100">
    {% if systemmode %}
  <h4 class="ml-2 pl-4 mb-4 mt-0 ">{{systemlisttitle}}</h4>
  <ul class="system-todo list-group list-group-flush">
    {% for systemTodo in systemTodos %}
    <li class="list-group-item border-bottom pb-0" data-id="{{systemTodosIDs[loop.index0]}}" >
  <div class="form-check mb-3 ml-3 d-flex align-items-center" style="justify-content: space-between;">
    <input class="form-check-input update-todo" type="checkbox" value="" id="{{systemTodosIDs[loop.index0]}}" {% if 1==systemTodosStatus[loop.index0] %}checked{% endif %}>
    <label class="form-check-label ml-2" for="{{systemTodosIDs[loop.index0]}}" >
      {{systemTodo}}
    </label><i class="remove-todo fas fa-trash-alt mr-3"></i>
  </div>
    </li>
    {% endfor %}
  </ul>
  {% endif %}
  {% if mymode %}
  <h4 class="ml-2 pl-4 mb-4 mt-5">{{mylisttitle}}</h4>
  <ul class="my-todo list-group list-group-flush">
    {% for myTodo in myTodos %}
    <li class="list-group-item border-bottom pb-0" data-id="{{myTodosIDs[loop.index0]}}" >
  <div class="form-check mb-3 ml-3 d-flex align-items-center" style="justify-content: space-between;">
    <input class="form-check-input update-todo" type="checkbox" value="" id="{{myTodosIDs[loop.index0]}}" {% if 1==myTodosStatus[loop.index0] %}checked{% endif %}>
    <label class="form-check-label ml-2" for="{{myTodosIDs[loop.index0]}}" >
      {{myTodo}}
    </label><i class="remove-todo fas fa-trash-alt mr-3"></i>
  </div>
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</div>
</div>

<style>
{% if linethrough==1 %}
input[type=checkbox]:checked + label{
text-decoration: line-through;
}
{% endif %}

input[type=checkbox]{
    cursor: pointer;
}
label{
    cursor: pointer;
}
.remove-todo{
    cursor: pointer;
}
</style>








