{% extends "index.html" %}
{% load static %}
{% block content %}
<meta name="csrf-token" content="{{ csrf_token }}">
<style>
    .cancelled--dot{
        background-color:grey;
      }
      .approved--dot{
        background-color:green;
      }
      .rejected--dot{
        background-color:red;
      }
      .requested--dot{
        background-color:orange;
      }

      .status-rejected{
        border-left: 4px solid red !important;
        border-radius: 5px 0 0 4px;

      }
     .status-cancelled {
        border-left: 4px solid grey !important;
        border-radius: 5px 0 0 4px;

      }
      .status-requested{
        border-left: 4px solid orange !important;
        border-radius: 5px 0 0 4px;

      }
     .status-approved {
        border-left: 4px solid yellowgreen !important;
        border-radius: 5px 0 0 4px;

      }
      .delete{
        color = hsl(1, 100%, 61%) !important;
      }
        .diff-cell {
            background: rgba(255, 166, 0, 0.158);
        }
        .tooltip {
            position: relative;
            display: inline-block; /* Ensures that the tooltip container doesn't stretch to the full width */
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: auto; /* Allow the tooltip width to adjust based on content */
            max-width: auto; /* Limit the maximum width of the tooltip to prevent it from overflowing */
            background-color: hsl(8,77%,56%);
            color: white;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 5%;
            left: 50%;
            transform: translateX(5%);
            opacity: 0;
            transition: opacity 0.3s;
            white-space: nowrap; /* Prevents the text from wrapping */
            overflow: hidden; /* Hides any overflowed content */
            font-size:15px;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>

<div hx-get="{% url "my-leave-request-nav" %}" hx-trigger="load">
</div>
<div>
    {% include "leave/user_leave/user_leave.html" %}

</div>
{% include "generic/components.html" %}
<div class="oh-checkpoint-badge mb-2" id="selectedInstances" data-ids="[]" data-clicked="" style="display: none">
</div>


<div class="oh-wrapper" hx-trigger="load" hx-get="{% url "user-request-filter" %}?{{request.GET.urlencode}}"
   id="listContainer">
  <div class="animated-background">
</div>
</div>


<div class="oh-activity-sidebar" id="leaveactivitySidebar" style="z-index:1000;">
    <div class="oh-activity-sidebar__body" id="commentContainer">
    </div>
  </div>

<div class="oh-modal" id="cancelModal" role="dialog"
	aria-labelledby="cancelModal" aria-hidden="true">
<div class="oh-modal__dialog" id="cancelForm"></div>
</div>

<script src="{% static 'cbv/my_leave_request/my_leave_request.js' %}"></script>

{% endblock content %}