{% load i18n %} {% load horillafilters %} {% load basefilters %}
<div class="oh-modal__dialog-header">
  <span class="oh-modal__dialog-title" id="addEmployeeObjectiveModalLabel">
    <h5 style="margin-bottom: 20px;">Timesheet Details</h5>
  </span>
  <button
    type="button"
    class="oh-modal__close"
    data-dismiss="oh-modal"
    aria-label="Close"
    data-toggle="oh-modal-toggle"
    hx-target="#OneContractTarget"
  >
    <ion-icon name="close-outline"></ion-icon>
  </button>
    <div class="oh-timeoff-modal__stats-container mb-3">
      <div class="oh-timeoff-modal__stat">
          <span class="oh-timeoff-modal__stat-title">{% trans "Employee" %}</span>
          <span class="oh-timeoff-modal__stat-count">{{time_sheet.employee_id}}</span>
      </div>
      <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
          <span class="oh-timeoff-modal__stat-title">{% trans "Project" %}</span>
          <span class="oh-timeoff-modal__stat-count">{{time_sheet.project_id}}</span>
      </div>
    </div>
    <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
        <div class="oh-timeoff-modal__stat">
            <span class="oh-timeoff-modal__stat-title">{% trans "Task" %}</span>
            <span class="oh-timeoff-modal__stat-count">{{time_sheet.task_id}}</span>
        </div>
        <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
            <span class="oh-timeoff-modal__stat-title">{% trans "Date" %}</span>
            <span class="oh-timeoff-modal__stat-count">{{time_sheet.date}}</span>
        </div>
    </div>
    <div class="oh-timeoff-modal__stats-container mt-3 mb-3">
        <div class="oh-timeoff-modal__stat">
            <span class="oh-timeoff-modal__stat-title">{% trans "Time Spent" %}</span>
            <span class="oh-timeoff-modal__stat-count">{{time_sheet.time_spent}}</span>
        </div>
        <div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
            <span class="oh-timeoff-modal__stat-title">{% trans "Status" %}</span>
            <span class="oh-timeoff-modal__stat-count">{{time_sheet.status}}</span>
        </div>
    </div>
    <div class="mt-3 mb-5" style="width:100%;">
        <div class="oh-timeoff-modal__stat">
            <span class="oh-timeoff-modal__stat-title">{% trans "Description" %}</span>
            <span class="oh-timeoff-modal__stat-count">{{time_sheet.description}}</span>
        </div>
    </div>
    <div class="oh-modal__button-container text-center">
       <div class="oh-btn-group">
         <a hx-get="{% url 'update-time-sheet' time_sheet.id %}"
          hx-target="#TimeSheetFormTarget"
          data-toggle="oh-modal-toggle"
          data-target="#TimeSheetModal"
          class="oh-btn oh-btn--warning"
          style="{% if perms.project.view_timesheet or request.user|is_reportingmanager %} width: 25%;{% else %}width: 50%;{% endif %}">
           <ion-icon
           name="create-outline"
           role="img"
           class="md hydrated"
           aria-label="create outline"
           ></ion-icon>{% trans "Edit" %}
          </a>
          {% if perms.project.view_timesheet or request.user|is_reportingmanager %}
          <a href="{% url 'personal-time-sheet-view' time_sheet.employee_id.id %}"
          class="oh-btn oh-btn--info me-1 ms-1"
          style="width: 48%;">
            <ion-icon
            name="bar-chart"
            role="img"
            class="md hydrated"
            aria-label="create outline"
            ></ion-icon>{% trans "View Timesheet Chart" %}
           </a>
           {% endif %}
          <a href="{% url 'delete-time-sheet' time_sheet.id %}"
          class="oh-btn oh-btn--danger"
          style="{% if perms.project.view_timesheet or request.user|is_reportingmanager %} width: 25%;{% else %}width: 50%;{% endif %}"
          onclick="event.preventDefault();event.stopPropagation(); confirm(`{% trans 'Do you want to delete this project?' %}`)">
            <ion-icon
            name="trash-outline"
            role="img"
            class="md hydrated"
            aria-label="create outline"
            ></ion-icon>{% trans "Delete" %}
           </a>
        </div>
    </div>
</div>