{% load bleach_tags %}

{% load determine_primary %}

<!-- Objectives Section -->
<header class="content-section-header">
    <div class="content-section-heading">
        <h4>Project Objectives</h4>
        <p class="content-section-intro">Create specific objectives, track their progress, and view deadlines in the calendar. Select a status badge to advance its state.</p>
    </div>
    <a class="icon edit-icon btn btn-primary btn-sm" href="{% url 'rolodex:project_component_update' project.id %}#objectives">Add & Edit Objectives</a>
</header>

{% if project.projectobjective_set.all %}
  <div class="objectives-workspace">
    <table id="objectives-table" class="objectives-table" objectives-update-url="{% url 'rolodex:ajax_update_objective_order' %}" objectives-update-csrftoken="{{ csrf_token }}" project-id="{{ project.id }}">
        <thead class="visually-hidden">
            <tr>
                <th>Complete</th>
                <th>Reorder</th>
                <th>Objective</th>
                <th class="align-middle">Status</th>
                <th class="align-middle">Progress</th>
                <th class="align-middle">Deadline</th>
                <th>Actions</th>
            </tr>
        </thead>

        {% group_by_priority project.projectobjective_set.all as priority_groups %}
        {% for group in priority_groups %}
            <tbody class="objective-priority-heading">
              <tr>
                <th id="{{ group|lower }}-header" class="priority-header" colspan="7" scope="colgroup">{{ group }} objectives</th>
              </tr>
            </tbody>
            <tbody id="{{ group|lower }}_priority" class="sortable_list connected_sortable">
                {% if priority_groups|get_item:group %}
                    {% for objective in priority_groups|get_item:group %}
                        <!-- Objective Table Row -->
                        {% include "snippets/project_objective_row.html" %}

                        <!-- Collapsible Task Container -->
                        <tr id="tasks-objective-row-{{ objective.id }}" data-id="ignore-{{ objective.id }}" class="accordion objective-tasks-row hiddenAccordion">
                            <td colspan="7">
                                <div class="accordion-content">
                                    <div id="task-list-{{ objective.id }}">
                                        {% include "snippets/project_objective_subtasks.html" %}
                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr id="{{ group|lower }}_placeholder" data-id="{{ group|lower }}_placeholder" class="priority-row-placeholder">
                        <td colspan="7" scope="colgroup">Create a {{ group }} objective or drag-and-drop an objective here to update its priority.</td>
                    </tr>
                {% endif %}
            </tbody>
        {% endfor %}
    </table>
  </div>
{% else %}
   <div class="empty-state">
       <p class="empty-state-title">No objectives yet</p>
       <p class="empty-state-description">Define objectives to make the engagement's current priorities and next steps visible.</p>
   </div>
{% endif %}