{% block active_jobs_section %}
<ul id="active_jobs_section" class="list">
  <div class="flex justify-center items-center gap-4">
    <li class="py-4 text-center font-bold tracking-wide">Active Jobs</li>
    <button class="cursor-pointer scale-75" hx-get="/active-jobs" hx-target="#active_jobs_section" hx-swap="outerHTML">
      {% include "icons/refresh_icon.html" %}
    </button>
  </div>
  {% for item in active_jobs %}
  <li class="list-row">
    <div class="bg-secondary rounded-box size-10 flex justify-center items-center text-secondary-content">
      {% if item.content.Url %}
      {% include "icons/globe_icon.html" %}
      {% elif item.content.File %}
      {% include "icons/document_icon.html" %}
      {% else %}
      {% include "icons/chat_icon.html" %}
      {% endif %}
    </div>
    <div>
      <div class="[&:before]:content-['Status:_'] [&:before]:opacity-60">
        {% if item.status.InProgress %}
        In Progress, attempt {{item.status.InProgress.attempts}}
        {% else %}
        {{item.status}}
        {% endif %}
      </div>
      <div class="text-xs font-semibold opacity-60">
        {{item.created_at|datetimeformat(format="short", tz=user.timezone)}} </div>
    </div>
    <p class="list-col-wrap text-xs [&:before]:content-['Content:_']  [&:before]:opacity-60">
      {% if item.content.Url %}
      {{item.content.Url.url}}
      {% elif item.content.File %}
      {{item.content.File.file_info.file_name}}
      {% else %}
      {{item.content.Text.text}}
      {% endif %}
    </p>
    <!-- <button class="btn disabled btn-square btn-ghost btn-sm"> -->
    <!-- {% include "icons/edit_icon.html" %} -->
    <!-- </button> -->
    <button hx-delete="/jobs/{{item.id}}" hx-target="#active_jobs_section" hx-swap="outerHTML"
      class="btn btn-square btn-ghost btn-sm">
      {% include "icons/delete_icon.html" %}
    </button>
  </li>
  {% endfor %}
</ul>
{% endblock %}