{% if projects %}
    {% for project in projects %}
    <div class="text-sm breadcrumbs mb-4 opacity-70">
        <ul>
            <li><a href="{{ url_for('main.index') }}">Projects</a></li>
            <li>{{ project.name }}</li>
        </ul>
    </div>
        <div class="mb-4" data-project-id="{{ project.id }}" x-data="{ projectOpen: true }">
            <!-- Project Edit Form Container -->
            <div id="project-edit-form-container-{{ project.id }}"></div>
            
            <div class="flex justify-between items-center">
                <h2 class="text-2xl font-semibold mb-0 project-name">{{ project.name }}</h2>
                <div class="project-actions flex items-center ml-auto gap-2">
                    <div class="text-slate-200 hover:text-slate-400 cursor-pointer flex items-center justify-center tooltip tooltip-top" 
                          data-tip="Edit project"
                          hx-get="/htmx/projects/{{ project.id }}/edit" 
                          hx-target="#project-edit-form-container-{{ project.id }}" 
                          hx-swap="innerHTML"
                          hx-trigger="click">
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" width="1.2em" height="1.2em">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                          </svg>
                    </div>
                    <!-- Delete project button -->
                    <div class="text-slate-200 hover:text-error cursor-pointer flex items-center justify-center tooltip tooltip-top ml-2"
                          data-tip="Delete project"
                          @click.stop="
                          console.log('Delete project button clicked');
                          $dispatch('open-modal', {
                              id: 'delete-confirmation-modal', 
                              title: 'Confirm Delete Project'
                          }); 
                          console.log('Modal event dispatched');
                          const content = document.getElementById('delete-confirmation-modal-content');
                          if (!content) {
                              console.error('Modal content element not found');
                              return;
                          }
                          content.innerHTML = '';
                          
                          // Create confirmation message
                          const message = document.createElement('p');
                          message.className = 'mb-4';
                          message.textContent = 'Are you sure you want to delete this project? This will also delete all sprints, tasks, and issues associated with this project.';
                          content.appendChild(message);
                          
                          // Create action buttons container
                          const actions = document.createElement('div');
                          actions.className = 'modal-action';
                          
                          // Create cancel button
                          const cancelBtn = document.createElement('button');
                          cancelBtn.className = 'btn btn-ghost';
                          cancelBtn.textContent = 'Cancel';
                          // Use Alpine.js directive to close modal
                          cancelBtn.setAttribute('x-on:click', 'open = false');
                          
                          // Create delete button
                          const deleteBtn = document.createElement('button');
                          deleteBtn.className = 'btn btn-error';
                          deleteBtn.textContent = 'Delete';
                          deleteBtn.addEventListener('click', function() {
                              console.log('Delete button clicked');
                              // Find the Alpine.js component and set open to false
                              const modalComponent = document.querySelector('#delete-confirmation-modal [x-data]');
                              if (modalComponent && modalComponent.__x) {
                                  modalComponent.__x.setData('open', false);
                                  console.log('Modal closed');
                              } else {
                                  console.error('Modal component not found');
                              }
                              // Send delete request with redirect to dashboard
                              console.log('Sending delete request to /htmx/projects/{{ project.id }}/delete');
                              htmx.ajax('DELETE', '/htmx/projects/{{ project.id }}/delete', {
                                  target: 'body',
                                  swap: 'none',
                                  headers: {
                                      'HX-Redirect': '/'
                                  }
                              });
                          });
                          
                          // Add buttons to container
                          actions.appendChild(cancelBtn);
                          actions.appendChild(deleteBtn);
                          content.appendChild(actions);">
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="1.2em" height="1.2em">
                              <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                          </svg>
                    </div>
                </div>
            </div>
            <div class="py-4 divide-y divide-base-200">
                <!-- Description Section - Collapsible with Alpine.js -->
                <div x-data="{ descriptionOpen: true }" class="pb-4">
                    <div class="flex justify-between items-center mb-3 cursor-pointer"
                         @click="descriptionOpen = !descriptionOpen">
                        <h3 class="font-medium mb-0 opacity-70">Description</h3>
                        <svg class="h-5 w-5" :class="descriptionOpen ? 'rotate-180' : ''" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                    <div x-show="descriptionOpen" x-transition class="prose">
                        {{ project.description|markdown or 'No description provided.' }}
                    </div>
                </div>

                <!-- Requirements Section - Collapsible with Alpine.js -->
                <div x-data="{ requirementsOpen: true }" class="py-4">
                    <div class="flex justify-between items-center mb-3 cursor-pointer"
                         @click="requirementsOpen = !requirementsOpen">
                        <h3 class="font-medium mb-0 opacity-70">Requirements</h3>
                        <svg class="h-5 w-5" :class="requirementsOpen ? 'rotate-180' : ''" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                    <div x-show="requirementsOpen" x-transition class="prose">
                        {{ project.requirements|markdown or 'No requirements provided.' }}
                    </div>
                </div>

                <!-- Implementation Details Section - Collapsible with Alpine.js -->
                <div x-data="{ implementationDetailsOpen: true }" class="py-4">
                    <div class="flex justify-between items-center mb-3 cursor-pointer"
                         @click="implementationDetailsOpen = !implementationDetailsOpen">
                        <h3 class="font-medium mb-0 opacity-70">Implementation Details</h3>
                        <svg class="h-5 w-5" :class="implementationDetailsOpen ? 'rotate-180' : ''" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                    <div x-show="implementationDetailsOpen" x-transition class="prose">
                        {{ project.implementation_details|markdown or 'No implementation details provided.' }}
                    </div>
                </div>

                <!-- Sprints Section -->
                
            </div>
        </div>
    {% endfor %}
{% else %}
    <div class="text-center p-5 border rounded">
        <h3 class="mb-3">No projects yet.</h3>
    </div>
{% endif %}
