{% extends "base.html" %}
<!DOCTYPE html>
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/general.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/todolist.css') }}">
{% endblock %}

{% block title %}Report Booklet Todolist{% endblock %}

{% block headline %}Report Booklet Writer{% endblock %}

{% block second_title %}That's your todolist!<br>Impressive, right?{% endblock %}

{% block content %}
<div class="todolist">
    <form class="todo_form" method="post" id="todolistform">
        <button class="button save_button" type="submit" name="save" value="save">
            <svg xmlns="http://www.w3.org/2000/svg" id="svg15" version="1.1" viewBox="0 0 29.867 32">
              <defs/>
              <defs id="defs4"/>
              <g id="Layer_49" data-name="Layer 49" transform="matrix(1.06667 0 0 1.06667 -2.133 -1.067)">
                <g id="g849" fill="#eee" fill-opacity="1">
                  <path class="icon_color" id="path8" fill="#eee" fill-opacity="1" d="M29 31H3a1 1 0 01-1-1V2a1 1 0 011-1h20a1 1 0 01.71.29l6 6A1 1 0 0130 8v22a1 1 0 01-1 1zM4 29h24V8.41L22.59 3H4z" class="cls-1"/>
                  <path class="icon_color" id="path10" fill="#eee" fill-opacity="1" d="M20 10.003H9a1 1 0 01-1-1V2a1 1 0 011-1h11a1 1 0 011 1v7.003a1 1 0 01-1 1zm-10-2h9V3h-9z" class="cls-1"/>
                  <path class="icon_color" id="path12" fill="#eee" fill-opacity="1" d="M22 25H7a1 1 0 01-1-1V14a1 1 0 011-1h15a1 1 0 011 1v10a1 1 0 01-1 1zM8 23h13v-8H8z" class="cls-1"/>
                </g>
              </g>
            </svg>
        </button>
        <ul>
            {% for i in range(data.columns| length): %}
                {% if not data[i]["done"]: %}
                <div class="section_container">
                    <li class="section">
                        <div class="section_title">
                            <input class="line checkbox" id="{{i}}" type="checkbox" name="{{i}}" form="todolistform">
                            <label class="line" for="{{i}}">{{ data[i]["title"] }}</label>
                        </div>
                    </li>
                {% else: %}
                <div class="section_container">
                    <li class="section">
                        <div class="section_title">
                            <input class="line checkbox" id="{{i}}" type="checkbox" name="{{i}}" checked form="todolistform">
                            <label class="line" for="{{i}}" style="text-decoration:line-through;">{{ data[i]["title"] }}</label>
                        </div>
                    </li>
                {% endif %}
                {% for j in range(data[i]["blocks"]| length): %}
                    {% if not data[i]["blocks"][j]["done"]: %}
                    <div class="head_container">
                        <li class="head">
                            <div class="head_title">
                                <input class="line checkbox" id="{{i}}.{{j}}" type="checkbox" name="{{i}}.{{j}}" form="todolistform">
                                <label class="line" for="{{i}}.{{j}}">{{ data[i]["blocks"][j]["head"] }}</label>
                            </div>
                        </li>
                    {% else: %}
                    <div class="head_container">
                        <li class="head">
                            <div class="head_title">
                                <input class="line checkbox" id="{{i}}.{{j}}" type="checkbox" name="{{i}}.{{j}}" checked form="todolistform">
                                <label class="line" for="{{i}}.{{j}}" style="text-decoration:line-through;">{{ data[i]["blocks"][j]["head"] }}</label>
                            </div>
                        </li>
                    {% endif %}
                    {% for k in range(data[i]["blocks"][j]["body"]| length): %}
                        {% if not data[i]["blocks"][j]["body"][k]["done"]: %}
                        <li class="lines">
                            <div class="item">
                                <input class="line checkbox" id="{{i}}.{{j}}.{{k}}" type="checkbox" name="{{i}}.{{j}}.{{k}}" form="todolistform">
                                <label class="line" for="{{i}}.{{j}}.{{k}}">{{ data[i]["blocks"][j]["body"][k]["content"] }}</label>
                            </div>
                        </li>
                        {% else: %}
                        <li class="lines">
                            <div class="item">
                                <input class="line checkbox" id="{{i}}.{{j}}.{{k}}" type="checkbox" name="{{i}}.{{j}}.{{k}}" checked form="todolistform">
                                <label class="line" for="{{i}}.{{j}}.{{k}}" style="text-decoration:line-through;">{{ data[i]["blocks"][j]["body"][k]["content"] }}</label>
                            </div>
                        </li>
                        {% endif %}
                    {% endfor %}
                    </div>
                    {% endfor %}
                </div>
            {% endfor %}
            </div>
        </ul>
    </form>
</div>
{% endblock %}
