<div class="sdn-todo-list
{% if params.readonly %} sdn-todo-list--readonly{% endif %}
{% if params.state and params.state == 'completed' %} sdn-todo-list--completed{% endif %}
{% if params.state and params.state == 'waiting' %} sdn-todo-list--waiting{% endif %}">

    {% if params.todolist_description %}
        {% if params.readonly %}
            {% if params.todolist_activate_url %}
                <div style="background-color: #fffbe4; padding: 30px; margin-bottom: 30px;">
                    <p style="font-size: 15px; opacity: 0.6">
                        {{ params.todolist_description }}
                    </p>
                    <a href="{{ params.todolist_activate_url }}" class="govuk-button govuk-button__secondary" style="margin-bottom: 0;  opacity: 0.8">Začať evidovať stav vybavenia</a>
                </div>
            {% endif %}
        {% else %}
            <div style="background-color: #fffbe4; padding: 30px; margin-bottom: 30px;">
                <p style="font-size: 15px; margin-bottom: 0; opacity: 0.6">
                    {{ params.todolist_description }}
                </p>
            </div>
        {% endif %}
    {% endif %}

    {% if params.tasks.length > 0 %}
    <div class="sdn-todo-list-box">
        <div class="sdn-todo-list__title">{{ params.title }}</div>
        <ul class="sdn-todo-list__items govuk-checkboxes govuk-checkboxes--small">
          {% for task in params.tasks %}
          <li class="sdn-todo-list__item">
            {% if task.html %}
              {{ task.html|safe }}
            {% else %}
              <div>
                <div class="govuk-checkboxes__item">
                  <input class="govuk-checkboxes__input" id="todo-list-input-{{ loop.index }}" name="todo-list-input-{{ loop.index }}" type="checkbox" value="{{ loop.index }}"{% if task.completed %} checked="checked"{% endif %}>
                  <label class="govuk-label govuk-checkboxes__label" for="todo-list-input-{{ loop.index }}">
                    {{ task.title }}
                  </label>

                    {% if task.description %}
                        <div class="snd-todo-list__item__info">{{ task.description|safe }}</div>
                    {% endif %}
                </div>
              </div>
              {% if task.link_text %}
                <div>
                  <a href="{{ task.link_url }}" class="snd-todo-list__link"{% if task.open_in_new_window %} target="_blank"{% endif %}>{{ task.link_text }}</a>
                </div>
              {% endif %}
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
    {% if params.info or params.primary_button or params.secondary_button %}
      <div class="sdn-todo-list-main-action">
        {% if params.info %}
            <div class="govuk-body-s sdn-todo-list-main-action__info">
                {{ params.info|safe }}
            </div>
        {% endif %}

        <div class="sdn-todo-list-main-action-buttons-wrapper">
            <div class="sdn-todo-list-main-action-buttons">
                {% if params.primary_button %}
                    <a href="{{ params.primary_button_url }}" role="button" draggable="false" class="govuk-button govuk-button--start">
                      {{ params.primary_button }}

                      {#- The SVG needs `focusable="false"` so that Internet Explorer does not
                      treat it as an interactive element - without this it will be
                      'focusable' when using the keyboard to navigate. #}
                      <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
                        <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
                      </svg>
                    </a>
                {% endif %}

                {% if params.secondary_button %}
                    <a href="{{ params.secondary_button_url }}" role="button" draggable="false" class="govuk-button">
                      {{ params.secondary_button }}
                    </a>
                {% endif %}
            </div>
        </div>

        {% if params.reset_button %}
        <a href="{{ params.reset_button_url }}" role="button" draggable="false" class="govuk-button govuk-button__secondary">
          {{ params.reset_button }}
        </a>
        {% endif %}
      </div>
    {% endif %}
</div>
