<h2 class="dialog-title">Tasks widget</h2>

<section class="card">
  <h2 class="card-title">Included task lists</h2>
  <p class="sub">Each linked person adds their own CalDAV task lists (set
    up in <a href="/settings">Settings</a> -- a plain ICS subscription
    has no task list) -- being linked here doesn't include anything
    automatically. Anyone linked to this frame can mute a list they'd
    rather not see here, even one they don't own; only its owner can add
    it back.</p>
  <ul class="calendar-user-list">
    {% for u in task_users %}
      <li>
        <p class="calendar-user-name">{{ u.display_name }}{% if u.is_self %} (you){% endif %}</p>
        {% if u.task_lists %}
          {% set current_palette = frame.palette_rgb or default_palette_rgb %}
          {% set current_hex = palette_to_hex(current_palette) %}
          {% for c in u.task_lists %}
            <div class="checkbox-row calendar-row" style="margin-top: 6px;">
              <input type="checkbox" class="task-list-toggle"
                     data-user-id="{{ u.user_id }}" data-key="{{ c.key }}" data-label="{{ c.label }}"
                     {% if c.included %}checked{% endif %}>
              <label style="margin: 0; font-weight: normal;">{{ c.label }}</label>
              {% if u.is_self %}
                <span class="task-list-color-picker" data-key="{{ c.key }}">
                  {% for idx in range(2, 6) %}
                    <button type="button" class="color-swatch {% if c.color_index == idx %}selected{% endif %}"
                            data-index="{{ idx }}" title="{{ task_color_labels[idx] }}"
                            style="background-color: {{ current_hex[idx] }};"></button>
                  {% endfor %}
                  <button type="button" class="color-swatch color-swatch-auto {% if c.color_index is none %}selected{% endif %}"
                          data-index="" title="Auto (assigned automatically)">Auto</button>
                </span>
              {% endif %}
            </div>
          {% endfor %}
        {% elif u.is_self %}
          <p class="sub" style="margin-top: 6px;">No CalDAV task lists set up yet -- add a CalDAV account in <a href="/settings">Settings</a>.</p>
        {% else %}
          <p class="sub" style="margin-top: 6px;">No task lists included.</p>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</section>

<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Settings</h2>
  <form id="tasks-config-form">
    <label>Name
      <input type="text" id="tasks_name" maxlength="40" placeholder="Tasks" value="{{ task_cfg.name }}">
    </label>
    <p class="sub" style="margin-top: 4px;">Shown at the top of this widget on the panel instead of "Tasks" -- e.g. "Chores" or "Mom's list".</p>
    <div class="checkbox-row" style="margin-top: 10px;">
      <input type="checkbox" id="tasks_show_completed" {% if task_cfg.show_completed %}checked{% endif %}>
      <label for="tasks_show_completed">Also show tasks completed in the last 24 hours</label>
    </div>
    <button type="submit">Save</button>
  </form>
</section>

<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Preview</h2>
  <p class="sub">How this widget currently renders.</p>
  <img class="preview-img" id="tasks-preview" alt="Tasks preview">
  <button type="button" class="secondary" id="tasks-preview-refresh">Refresh now</button>
</section>
