{% extends 'index.html' %}

{% block content %}
{% load i18n %} {% load horillafilters %}{% load static %}
<style>
    .avatars {
      display: flex;
      padding: 8px 10px 8px 10px;
    }

    .avatars__item {
      background-color: #596376;
      border: 2px solid white;
      border-radius: 100%;
      color: #ffffff;
      display: block;
      font-family: sans-serif;
      font-size: 12px;
      font-weight: 100;
      height: 26px;
      width: 26px;
      line-height: 17px;
      text-align: center;
      transition: margin 0.1s ease-in-out;
      overflow: hidden;
      margin-left: -10px;
    }

    .avatars__item:first-child {
      z-index: 5;
    }

    .avatars__item:nth-child(2) {
      z-index: 4;
    }

    .avatars__item:nth-child(3) {
      z-index: 3;
    }

    .avatars__item:nth-child(4) {
      z-index: 2;
    }

    .avatars__item:nth-child(5) {
      z-index: 1;
    }

    .avatars__item:last-child {
      z-index: 0;
    }

    .avatars__item img {
      width: 100%;
    }

    .avatars:hover .avatars__item {
      margin-right: 10px;
    }
    .select2-container .select2-selection.select2-selection--multiple {
      padding: 5px !important;
      max-height: 70px !important;
      overflow: hidden;
      overflow-y: scroll;
    }
    .search-highlight {
      background-color: rgba(255, 68, 0, 0.076);
    }
    #enlargeImageContainer {
      position: absolute;
      left: -300px;
      top: 100px;
      height: 200px;
      width: 200px;
    }
</style>
<main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
    {% include 'task/new/task_navbar.html' %}
</main>
{% include "generic/components.html" %}
<div class="oh-wrapper">
  {% include "cbv/projects/project_details.html" %}

<div id="viewContainer" >
    {% if view_type == 'list' %}
    {% include 'task/new/task_list_view.html' %}
    {% else %}
    {% include 'task/new/task_kanban_view.html' %}
    {% endif %}
</div>
</div>

<div class="oh-modal" id="TaskModal" role="dialog" aria-labelledby="TaskModal" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width: 550px" id="TaskFormTarget"></div>
</div>

<div class="oh-modal" id="TaskUpdateModal" role="dialog" aria-labelledby="TaskUpdateModal" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width: 550px" id="TaskUpdateTarget"></div>
</div>

<div class="oh-modal" id="ProjectStageModal" role="dialog" aria-labelledby="TaskTimesheetModal" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width:550px" id="ProjectStageFormTarget"></div>
</div>

<div class="oh-modal" id="TaskTimesheetModal" role="dialog" aria-labelledby="TaskTimesheetModal" aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width:1350px" id="TaskTimesheetTarget"></div>
</div>

<div class="oh-modal {{request.GET.active}}" id="TimesheetUpdateModal" role="dialog" aria-labelledby="TaskUpdateModal"
    aria-hidden="true">
    <div class="oh-modal__dialog" style="max-width: 550px" id="TimesheetUpdateTarget"></div>
</div>

<div class="oh-modal" id="addTimesheetModal" role="dialog" aria-labelledby="addTimesheetModal" aria-hidden="true"
    style="z-index: 1022;">
    <div class="oh-modal__dialog" id="addTimesheetModalBody">
        <!-- Modal hx content goes here -->
    </div>
</div>
<script>
    $(document).ready(function(){
      $('#taskFilterButton').click()
    });

    $("#viewContainer").on("htmx:afterSwap", function (e) {
        // Check if the event originated from the quick add button or editable input field
        var triggerElement = e.target ? e.target : null;
        if (triggerElement && (triggerElement.classList.contains('oh-table__editable-input') || triggerElement.classList.contains('oh-kanban__add-card-container'))) {
            // If the event is triggered by the 'Quick add' button or Editable input field , return and do nothing
            return;
        }
        // Load new scripts
        $.getScript("{% static 'build/js/web.frontend.min.js' %}", function () { });
        $.getScript("{% static '/project/task_pipeline.js' %}", function () { });
    });
</script>


<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="{% static '/project/task_pipeline.js' %}"></script>
{% endblock content %}