{% load bloomerp %}
{% load crispy_forms_tags %}
{% load static %}

{% if todos %}
{% for todo in todos %}
<div class="todo mb-3 p-2 rounded">
    <!--Date-->
    <div class="d-md-flex d-block justify-content-between align-items-center">
        <div class="d-flex gap-2 align-items-center">
            <!-- Priority -->
            <span 
                
                {% if todo.priority == 3 %}
                class="badge bg-danger"
                {% elif todo.priority == 2 %}
                class="badge bg-warning"
                {% else %}
                class="badge bg-success"
                {% endif %}
            >
                {{ todo.priority_string }}
            </span>
            <!-- End Priority -->

            <!-- Content Object Link -->
            {% if todo.content_object %}
            <a 
                hx-get="{{ todo.content_object | detail_view_url }}" 
                hx-target="#main-content"
                hx-swap="innerHTML"
                hx-trigger="click"
                hx-push-url="true"
                hx-history-push="true"
                class="badge bg-info pointer"
                data-bs-dismiss="modal"

                >Object: {{ todo.content_object }}</a>
            {% endif %}
            <!-- End Content Object Link -->

        </div>

        <div>
            <b>{{todo.required_by|date:request.user.date_view_preference}}</b>
        </div>
    </div>
    <!--End Date-->

    <!--Short todo-->
    <div class="d-flex mt-2">
        <!-- Left Section: Title -->
            <input 
                class="form-check-input" 
                type="checkbox" 
                {% if todo.is_completed %}checked{% endif %}
                hx-post="{% url 'components_todos' %}{% if content_type_id and object_id %}?content_type_id={{ content_type_id }}&object_id={{ object_id }}{% endif %}"
                hx-vals='{"completed_todo_id": "{{ todo.id }}"}'
                hx-target="#todo-container"
                hx-include="#todo-content-types"
                hx-swap="innerHTML"
                hx-trigger="click"
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                >
            <span class="pointer ms-2" role="button" data-bs-toggle="collapse" data-bs-target="#detailedTodo{{todo.id}}">
                {% if todo.is_completed %}
                    <s>{{ todo.title }}</s>
                {% else %}
                    {{ todo.title }}
                {% endif %}
            </span>   
    </div>
    <!--End short todo-->

    <!--Long todo-->
    <div id="detailedTodo{{todo.id}}" class="collapse my-2">
        <div class="border border-1 p-2 rounded">
            <div class="row">
                <div class="col-8">
                    <p>{% if todo.content %}{{todo.content}}{% else %}<span class="fw-light">No todo description provided</span>{% endif %}</p>
                </div>

                <div class="col-4 justify-content-end d-flex">
                    {% if todo.requested_by == request.user %}
                        <a 
                            hx-post="{% url 'components_todos' %}{% if content_type_id and object_id %}?content_type_id={{ content_type_id }}&object_id={{ object_id }}{% endif %}"
                            hx-vals='{"delete_todo_id": "{{ todo.id }}"}'
                            hx-target="#todo-container"
                            hx-swap="innerHTML"
                            hx-trigger="click"
                            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                            class="pointer"
                            >
                            <img src="{% static 'bloomerp/icons/delete.svg' %}" width="20" height="20">
                        </a>
                    {% endif %}
                </div>
            </div>
                    
            <hr>

            <div class="row">
                <div class="col-md-6 col-12">
                    <span class="text-meta d-block">Requested by: <span class="fw-bold">{% if todo.requested_by == request.user %}you{% else %}{{todo.requested_by}}{% endif %}</span></span>
                    <span class="text-meta d-block">Assigned to: <span class="fw-bold">{% if todo.assigned_to == request.user %}you{% else %}{{todo.assigned_to}}{% endif %}</span></span>
                </div>

                <div class="col-md-6 col-12">
                    <span class="text-meta d-block">Created: <span class="fw-bold">{{todo.datetime_created|date:request.user.datetime_view_preference}}</span></span>
                    <span class="text-meta d-block">Completed on: <span class="fw-bold">{{todo.datetime_completed|date:request.user.datetime_view_preference}}</span></span>
                </div>
            </div>
        </div>
    </div>
    <!--End todo-->
    
</div>
{% endfor %}
{% else %}

<p>No todo's found.</p>

{% endif %}
