{% load static %}
{% load crispy_forms_field %}

<!--Buttons-->
<div class="d-md-flex d-block justify-content-between gap-2">
    <div class="gap-2">
        <button 
            hx-get="{% url 'components_todos' %}?filter=all{% if content_type_id and object_id %}&content_type_id={{ content_type_id }}&object_id={{ object_id }}{% endif %}"
            hx-target="#todo-container"
            hx-swap="innerHTML"
            hx-trigger="click"
            class="btn btn-sm border pointer">
            <span>Refresh</span>
            <img
                src="{% static 'bloomerp/icons/refresh.svg' %}"
                width="20"
                height="20"
                class="pointer"
            >
        </button>

        <button 
            class="btn btn-sm border pointer"
            data-bs-toggle="collapse" 
            data-bs-target="#new-todo"
            >
            <span>New todo</span>
            <img 
                src="{% static 'bloomerp/icons/add.svg' %}" 
                width="20" 
                height="20"
                >
        </button>
    </div>

    <div class="d-flex gap-2 mt-sm-0 mt-2">
        <a 
            class="pointer {{ filter_class_dict.all }}"
            hx-get="{% url 'components_todos' %}?filter=all{% if content_type_id and object_id %}&content_type_id={{ content_type_id }}&object_id={{ object_id }}{% endif %}"
            hx-target="#todo-container"
            hx-swap="innerHTML"
            hx-trigger="click"
            >all</a>

        <a 
            class="pointer {{ filter_class_dict.uncompleted }}"
            hx-get="{% url 'components_todos' %}?filter=uncompleted{% if content_type_id and object_id %}&content_type_id={{ content_type_id }}&object_id={{ object_id }}{% endif %}"
            hx-target="#todo-container"
            hx-swap="innerHTML"
            hx-trigger="click"
            >uncompleted</a>
        
        
        <a
            class="pointer {{ filter_class_dict.completed }}"
            hx-get="{% url 'components_todos' %}?filter=completed{% if content_type_id and object_id %}&content_type_id={{ content_type_id }}&object_id={{ object_id }}&completed=True{% endif %}"
            hx-target="#todo-container"
            hx-swap="innerHTML"
            hx-trigger="click"
        >completed</a>
    </div>
</div>
<!--End Buttons-->

<!--New todo form-->
<form 
    id="new-todo" 
    class="collapse mb-2"
    hx-post="{% url 'components_todos' %}?filter=all{% if content_type_id and object_id %}&content_type_id={{ content_type_id }}&object_id={{ object_id }}{% endif %}"
    hx-target="#todo-container"
    hx-swap="innerHTML"
    hx-trigger="submit"
    >
    {% csrf_token %}

    <!-- Hidden fields -->
    <div class="d-none">
        {{ form.object_id }}
        {{ form.content_type }}
        {{ form.requested_by }}
    </div>
    <!-- End Hidden fields -->

    <p class="card-title">Add new to-do</p>
    <div class="row align-items-top">

        <div class="col-md-8">
            {% crispy_field form.title 'class' 'form-control form-control-sm' 'placeholder' 'title' %}
            {% crispy_field form.content 'class' 'form-control form-control-sm mt-2' 'placeholder' 'Description' %}
        </div>

        <div class="col-md-4 mt-2 mt-md-0">
            {% crispy_field form.priority 'class' 'form-control form-control-sm' 'placeholder' 'Priority' %}
            {% crispy_field form.required_by 'class' 'form-control form-control-sm mt-2' 'placeholder' 'Priority' %}

            <div class="d-block mt-2">
                <div class="form-check">
                    <input 
                        class="form-check-input form-check-input-lg" 
                        type="checkbox" 
                        value="checked" 
                        checked id=""
                        data-bs-toggle="collapse" 
                        data-bs-target="#assignTo"
                        >
                    <label 
                        class="form-check-label">
                        Assigned to me
                    </label>
                </div>
            
                <div class="collapse mt-2" id="assignTo">
                    {% crispy_field form.assigned_to 'class' 'form-control form-control-sm' 'placeholder' 'Assign to' %}
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-start mt-2">
        <button type="submit" class="btn btn-primary btn-sm">Add todo</button>
    </div>
</form>
<!--End New todo form-->

<p class="card-title">My todo's {% if object %}for {{ object }}{% endif %}</p>
{% include 'components/snippets/todo_list.html' with todos=my_todos %}

<p class="card-title">Assigned todo's {% if object %}for {{ object }}{% endif %}</p>
{% include 'components/snippets/todo_list.html' with todos=assigned_todos %}








