{% extends 'base.html' %}
{% block content %}
<div class="h-full flex flex-col" x-data="columnConfig()">
	{% if case_email %}
  <h1 class="text-xl font-semibold mb-4">Projects for {{ case_email }}</h1>
  {% else %}
  <h1 class="text-xl font-semibold mb-4">All projects</h1>

  {% endif %}
    <div class="flex justify-between">

    {% set profile = get_user_profile(session.uid) %}
    {% if profile.is_admin %}
    <div class="mb-4 flex w-[400px]">
      <label for="simulateCaseEmail" class=" text-sm font-medium text-slate-700 mb-1">Simulate case email:</label>
      <input type="text" id="simulateCaseEmail" x-model="case_email_sim"
        @keyup.debounce.1000ms="window.location.href=`/dashboard/1?case_email=${encodeURIComponent($data.case_email_sim)}`"
        class="w-full px-3 py-2 border w-64 border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        placeholder="Enter case email to simulate">
    </div>
    {% else %}
    <div></div>
    {% endif %}

      <div class="flex gap-2 items-center">
      <!-- Export Button -->
      <div class="mb-4">
        <a href="{{ url_for('dashboard_export_xls') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          <svg class="mr-2 -ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
          </svg>
          Export to Excel
        </a>
      </div>

      <!-- Per Page Dropdown -->
      <div class="mb-4 flex items-center">
        <label for="perPage" class="mr-2 text-sm font-medium text-slate-700">Items per page:</label>
        <select id="perPage" x-model="perPage" @change="window.location.href = `/dashboard/1?per_page=${$data.perPage}${$data.case_email_sim ? '&case_email=' + encodeURIComponent($data.case_email_sim) : ''}`"
          class="px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
          <option value="10">10</option>
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
      </div>

      <!-- Configure Visible Columns Link -->
      <div class="mb-4">
        <button @click="showColumnModal = true" class="text-blue-600 hover:text-blue-800 text-sm font-medium underline">
          Configure Visible Columns...
        </button>
      </div>

      <!-- Column Configuration Modal -->
      <div x-show="showColumnModal" x-cloak x-transition
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
        @click.self="showColumnModal = false">
        <div class="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold">Configure Visible Columns</h3>
            <button @click="showColumnModal = false" class="text-gray-500 hover:text-gray-700">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </button>
          </div>

          <div class="mb-4">
            <label class="flex items-center">
              <input type="checkbox" x-model="selectAll" @change="toggleAllColumns()"
                class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
              <span class="text-sm font-medium">Select All / Deselect All</span>
            </label>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-3 max-h-96 overflow-y-auto">
            <template x-for="(column, index) in columns" :key="index">
              <label class="flex items-center p-2 hover:bg-slate-50 rounded cursor-pointer">
                <input type="checkbox" :value="column" x-model="visibleColumns" @change="saveColumnSettings()"
                  :checked="visibleColumns.includes(column)"
                  class="mr-2 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                <span class="text-sm" x-text="column"></span>
              </label>
            </template>
          </div>

          <div class="flex justify-end space-x-3 mt-6">
            <button @click="resetToDefault()"
              class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
              Reset to Default
            </button>
            <button @click="showColumnModal = false;"
              class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
              Apply Changes
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% from "_expander.html" import expander %}

  <div class="overflow-scroll">
    <table class="w-full table-fixed shadow-md border border-slate-200">
      <thead class=" text-left text-sm  z-10 border-b border-blue-800 text-white font-medium"
        style="background-color: rgb(89, 121, 142);">
        <tr>
          <th class="px-4 py-3 w-16 sticky left-0 top-0  z-[50]" style="background-color: rgb(89, 121, 142);"></th>
          <th class="px-4 py-3 w-32 sticky left-16 top-0  z-[50]" style="background-color: rgb(89, 121, 142);" :class="{'hidden': !isColumnVisible('Matter Num')}">Matter Num</th>
          <th class="px-4 py-3 w-72 sticky top-0 left-48 z-[50]" style="background-color: rgb(89, 121, 142);"  :class="{'hidden': !isColumnVisible('Matter Description')}">Matter Description</th>
          <th class="px-4 py-3 w-64 sticky  top-0 z-[40]" style="background-color: rgb(89, 121, 142);" :class="{'hidden': !isColumnVisible('Client / Property')}">Client / Property</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-48 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Defendant 1')}">Defendant 1</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Matter Open')}">Matter Open</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Practice Area')}">Practice Area</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-64 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Notice Type')}">Notice Type</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Case Number')}">Case Number</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-72 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Premises Address')}">Premises Address</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Premises City')}">Premises City</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-48 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Assigned Attorney')}">Assigned Attorney</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-48 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Primary Contact')}">Primary Contact</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-48 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Secondary Paralegal')}">Secondary Paralegal</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Documents')}">Documents</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-64 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Matter Stage')}">Matter Stage</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-[400px] sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Completed Tasks')}">Completed Tasks</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-[400px] sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Pending Tasks')}">Pending Tasks</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Notice Service Date')}">Notice Service Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Notice Expir. Date')}">Notice Expir. Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Date Case Filed')}">Date Case Filed</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Daily Rent Damages')}">Daily Rent Damages</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Default Date')}">Default Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Default Entered On')}">Default Entered On</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Motions:')}">Motions:</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Demurrer Hearing Date')}">Demurrer Hearing Date </th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32  sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Motion To Strike Hearing Date')}">Motion To Strike Hearing Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Motion to Quash Hearing Date')}">Motion to Quash Hearing Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Other Motion Hearing Date')}">Other Motion Hearing Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('MSC Date')}">MSC Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('MSC Time')}">MSC Time</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-72 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('MSC Address')}">MSC Address</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-48 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('MSC Div/ Dept/ Room')}">MSC Div/ Dept/ Room</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Trial Date')}">Trial Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Trial Time')}">Trial Time</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-72 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Trial Address')}">Trial Address</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-48 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Trial Div/ Dept/ Room')}">Trial Div/ Dept/ Room </th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-48 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Final Result of Trial/ MSC')}">Final Result of Trial/ MSC</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Date of Settlement')}">Date of Settlement</th> <th class="px-4 py-3 w-32" :class="{'hidden': !isColumnVisible('Final Obligation Under the Stip')}">Final Obligation Under the Stip</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Def\'s Comply with the Stip?')}">Def's Comply with the Stip?</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Judgment Date')}">Judgment Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Writ Issued Date')}">Writ Issued Date</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Scheduled Lockout')}">Scheduled Lockout</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Oppose Stays?')}">Oppose Stays?</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-64 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Premises Safety or Access Issues')}">Premises Safety or Access Issues</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-64 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Matter Gate or Entry Code')}">Matter Gate or Entry Code</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Date Possession Recovered')}">Date Possession Recovered</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0 z-[40]" :class="{'hidden': !isColumnVisible('Attorney\'s Fees')}">Attorney's Fees</th>
          <th style="background-color: rgb(89, 121, 142);" class="px-4 py-3 w-32 sticky top-0  z-[40]" :class="{'hidden': !isColumnVisible('Costs')}">Costs</th>
        </tr>
      </thead>
      <tbody class="bg-slate-100 divide-y divide-slate-300">
        {% for r in rows %}
        <tr class="hover:bg-slate-200 transition-colors duration-150 ease-in-out group"
          x-data="{ expanded: false, hasOverflow: false }" x-init="
            $nextTick(() => {
              // Check overflow for ANY td in this row
              const tds = $el.querySelectorAll('td .content');
              hasOverflow = Array.from(tds).some(td => td.scrollHeight > td.clientHeight + 1);
            });
          ">
          <td class="px-4 py-3 sticky left-0 bg-slate-100 z-[30] group-hover:bg-slate-200 ease-in-out duration-150 transition-colors">
            <button x-show="hasOverflow" x-on:click="expanded = !expanded"
              class="mt-1 h-5 w-5 flex items-center justify-center rounded border cursor-pointer text-xs">
              <span class="inline-block transition-transform duration-150" :class="expanded ? 'rotate-90' : ''">▶</span>
            </button>
          </td>
          <td class="px-4 py-3 text-sm text-slate-800 left-16 bg-slate-100 sticky z-[30] group-hover:bg-slate-200 ease-in-out duration-150 transition-colors" :class="{'hidden': !isColumnVisible('Matter Num')}">
            {{ r.number }}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800 bg-slate-100 sticky left-48  w-64 z-[30] group-hover:bg-slate-200 ease-in-out duration-150 transition-colors"
            :class="{'hidden': !isColumnVisible('Matter Description')}">
            {% call expander() %}
            {{ r.matter_description }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800   w-64 " :class="{'hidden': !isColumnVisible('Client / Property')}">
            {% call expander() %}
            {{ r.client }}
            {% endcall %}
            </td>
          <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !isColumnVisible('Defendant 1')}">
            {% call expander() %}
            {{ r.defendant_1 }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !isColumnVisible('Matter Open')}">
            {% call expander() %}
            {{ r.matter_open }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !isColumnVisible('Practice Area')}">
            {% call expander() %}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !isColumnVisible('Notice Type')}">
            {% call expander() %}
            {{ r.notice_type }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !isColumnVisible('Case Number')}">
            {% call expander() %}
            {{ r.case_number }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800 w-[200px]" :class="{'hidden': !isColumnVisible('Premises Address')}">
            {% call expander() %}
            {{ r.premises_address }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !isColumnVisible('Premises City')}">
            {% call expander() %}
            {{ r.premises_city }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !isColumnVisible('Assigned Attorney')}">

            {% call expander() %}
            {{ r.responsible_attorney }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Primary Contact')}">
            {% call expander() %}
            {{ r.staff_person }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Secondary Paralegal')}">
            {% call expander() %}
            {{ r.staff_person_2 }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Documents')}">

            {% call expander() %}
            {% endcall %}
            {% if r.documents_url %}
            <a class="text-blue-500 text-underline" href=" {{ r.documents_url }}">Documents</a>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-sm text-slate-800" :class="{'hidden': !isColumnVisible('Matter Stage')}">
            {% call expander() %}
            {{ r.phase_name }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm align-top whitespace-normal w-[400px]"
            :class="{'hidden': !isColumnVisible('Completed Tasks')}" x-data="{ showCompletedModal: false}">
            {% call expander() %}
            {% if r.completed_tasks %}
            <div>
              <table class="w-full text-xs">
                <thead>
                  <tr>
                    <th class="text-left pb-1">Task</th>
                    <th class="text-right pb-1">Completed</th>
                  </tr>
                </thead>
                <tbody>
                  {% for x in r.completed_tasks[:2] %}
                  <tr>
                    <td class="py-1 pr-2 break-words">{{ x.description }}</td>
                    <td class="py-1 text-right whitespace-nowrap">{{ x.completed }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
              {% if r.completed_tasks|length > 2 %}
              <button @click="showCompletedModal = true" class="text-blue-500 hover:text-blue-700 text-sm mt-1">Show
                more...</button>
              {% endif %}
            </div>

            <div x-show="showCompletedModal" x-cloak x-transition
              class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
              @click.self="showCompletedModal = false">
              <div class="bg-white rounded-lg p-6 max-w-lg w-full max-h-[80vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg font-semibold">Completed Tasks</h3>
                  <button @click="showCompletedModal = false" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                      </path>
                    </svg>
                  </button>
                </div>
                <table class="w-full">
                  <thead>
                    <tr class="border-b">
                      <th class="text-left pb-2">Task Description</th>
                      <th class="text-right pb-2">Completed Date</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for x in r.completed_tasks %}
                    <tr class="border-b border-slate-200">
                      <td class="py-2 break-words">{{ x.description }}</td>
                      <td class="py-2 text-right whitespace-nowrap">{{ x.completed }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
            {% endif %}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm align-top whitespace-normal w-[400px] min-w-[400px]"
            :class="{'hidden': !isColumnVisible('Pending Tasks')}" x-data="{ showPendingModal: false }">

            {% call expander() %}
            {% if r.pending_tasks %}
            <div>
              <table class="w-full text-xs">
                <thead>
                  <tr>
                    <th class="text-left pb-1">Task</th>
                  </tr>
                </thead>
                <tbody>
                  {% for x in r.pending_tasks[:2] %}
                  <tr>
                    <td class="py-1 break-words">{{ x.description }}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
              {% if r.pending_tasks|length > 2 %}
              <button @click="showPendingModal = true" class="text-blue-500 hover:text-blue-700 text-sm mt-1">Show
                more...</button>
              {% endif %}
            </div>

            <div x-show="showPendingModal" x-cloak x-transition
              class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
              @click.self="showPendingModal = false">
              <div class="bg-white rounded-lg p-6 max-w-lg w-full max-h-[80vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                  <h3 class="text-lg font-semibold">Pending Tasks</h3>
                  <button @click="showPendingModal = false" class="text-gray-500 hover:text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                      </path>
                    </svg>
                  </button>
                </div>
                <table class="w-full">
                  <thead>
                    <tr class="border-b">
                      <th class="text-left pb-2">Task Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for x in r.pending_tasks %}
                    <tr class="border-b border-slate-200">
                      <td class="py-2 break-words">{{ x.description }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            </div>
            {% endif %}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Notice Service Date')}">
            {% call expander() %}
            {{ r.notice_service_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Notice Expir. Date')}">
            {% call expander() %}
            {{ r.notice_expiration_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Date Case Filed')}">
            {% call expander() %}
            {% if r.case_filed_date %}{{ r.case_filed_date }}{% else %}{{ r.case_field_date }}{% endif %}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Daily Rent Damages')}">

            {% call expander() %}
            {% if r.daily_rent_damages %}${{ "{:,.2f}".format(r.daily_rent_damages) }}{% endif %}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Default Date')}">
            {% call expander() %}
            {{ r.default_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Default Entered On')}">
            {% call expander() %}
            {{ r.default_entered_on_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Motions:')}"></td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Demurrer Hearing Date')}">
            {% call expander() %}
            {{ r.demurrer_hearing_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Motion To Strike Hearing Date')}">
            {% call expander() %}
            {{ r.motion_to_strike_hearing_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Motion to Quash Hearing Date')}">

            {% call expander() %}
            {{ r.motion_to_quash_hearing_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Other Motion Hearing Date')}">
            {% call expander() %}
            {{ r.other_motion_hearing_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('MSC Date')}">
            {% call expander() %}
            {{ r.msc_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('MSC Time')}">
            {% call expander() %}
            {{ r.msc_time }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('MSC Address')}">
            {% call expander() %}
            {{ r.msc_address }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('MSC Div/ Dept/ Room')}">
            {% call expander() %}
            {{ r.msc_div_dept_room }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Trial Date')}">

            {% call expander() %}
            {{ r.trial_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Trial Time')}">
            {% call expander() %}
            {{ r.trial_time }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Trial Address')}">
            {% call expander() %}
            {{ r.trial_address }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Trial Div/ Dept/ Room')}">
            {% call expander() %}
            {{ r.trial_div_dept_room }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Final Result of Trial/ MSC')}">
            {% call expander() %}
            {{ r.final_result }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Date of Settlement')}">
            {% call expander() %}
            {{ r.date_of_settlement }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Final Obligation Under the Stip')}">

            {% call expander() %}
            {{ r.final_obligation }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Def\'s Comply with the Stip?')}">

            {% call expander() %}
            {{ r.def_comply_stip }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Judgment Date')}">
            {% call expander() %}
            {{ r.judgment_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Writ Issued Date')}">
            {% call expander() %}
            {{ r.writ_issued_date }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Scheduled Lockout')}">
            {% call expander() %}
            {{ r.scheduled_lockout }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Oppose Stays?')}">
            {% call expander() %}
            {{ r.oppose_stays }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Premises Safety or Access Issues')}">
            {% call expander() %}
            {{ r.premises_safety }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Matter Gate or Entry Code')}">
            {% call expander() %}
            {{ r.matter_gate_code }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Date Possession Recovered')}">
            {% call expander() %}
            {{ r.date_possession_recovered }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Attorney\'s Fees')}">
            {% call expander() %}
            {{ r.attorney_fees }}
            {% endcall %}
          </td>
          <td class="px-4 py-3 text-sm" :class="{'hidden': !isColumnVisible('Costs')}">
            {% call expander() %}
            {{ r.costs }}
            {% endcall %}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="53" class="px-4 py-6 text-center text-slate-500">No matching projects found.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% include '_pagination.html' %}

  <script>
    function columnConfig() {
      return {
        showColumnModal: false,
        case_email_sim: '',
        perPage: 25,
        columns: [
          'Matter Num',
          'Matter Description',
          'Client / Property',
          'Defendant 1',
          'Matter Open',
          'Practice Area',
          'Notice Type',
          'Case Number',
          'Premises Address',
          'Premises City',
          'Assigned Attorney',
          'Primary Contact',
          'Secondary Paralegal',
          'Documents',
          'Matter Stage',
          'Completed Tasks',
          'Pending Tasks',
          'Notice Service Date',
          'Notice Expir. Date',
          'Date Case Filed',
          'Daily Rent Damages',
          'Default Date',
          'Default Entered On',
          'Motions:',
          'Demurrer Hearing Date',
          'Motion To Strike Hearing Date',
          'Motion to Quash Hearing Date',
          'Other Motion Hearing Date',
          'MSC Date',
          'MSC Time',
          'MSC Address',
          'MSC Div/ Dept/ Room',
          'Trial Date',
          'Trial Time',
          'Trial Address',
          'Trial Div/ Dept/ Room',
          'Final Result of Trial/ MSC',
          'Date of Settlement',
          'Final Obligation Under the Stip',
          'Def\'s Comply with the Stip?',
          'Judgment Date',
          'Writ Issued Date',
          'Scheduled Lockout',
          'Oppose Stays?',
          'Premises Safety or Access Issues',
          'Matter Gate or Entry Code',
          'Date Possession Recovered',
          'Attorney\'s Fees',
          'Costs'
        ],
        selectAll: true,
        visibleColumns: [],

        init() {
          this.loadColumnSettings();

          // Extract case_email and per_page from URL query parameter
          const urlParams = new URLSearchParams(window.location.search);
          const caseEmail = urlParams.get('case_email');
          const perPage = urlParams.get('per_page');
          if (caseEmail) {
            this.case_email_sim = caseEmail;
          }
          if (perPage) {
            this.perPage = parseInt(perPage);
          }
        },

        isColumnVisible(columnName) {
          return this.visibleColumns.includes(columnName);
        },

        loadColumnSettings() {
          const stored = localStorage.getItem('dashboardColumnVisibility');
          if (stored) {
            this.visibleColumns = JSON.parse(stored);
            this.selectAll = this.visibleColumns.length === this.columns.length;
          } else {
            // Default to showing all columns
            this.visibleColumns = [...this.columns];
            this.selectAll = true;
          }
        },

        saveColumnSettings() {
          localStorage.setItem('dashboardColumnVisibility', JSON.stringify(this.visibleColumns));
        },

        toggleAllColumns() {
          if (this.visibleColumns.length === 0) {
            this.visibleColumns = [...this.columns];
          this.selectAll = true;
          } else {
            this.visibleColumns = [];
          this.selectAll = false;
          }
          this.saveColumnSettings();
        },

        resetToDefault() {
          this.visibleColumns = [...this.columns];
          this.selectAll = true;
          this.saveColumnSettings();
        }
      }
    }
  </script>
</div>

<!--
<div class="flex flex-col m-4">
<div class=" w-full flex-grow overflow-scroll rounded-2xl overflow-hidden">
</div>
-->
{% endblock %}