<!-- Event Details Modal -->
<div class="ts-modal-backdrop" id="eventModalBackdrop"></div>
<div class="ts-modal" id="eventModal">
  <div class="ts-modal-header">
    <h3 class="ts-modal-title">Event Details</h3>
    <input type="hidden" id="currentEventId" value="">
    <button class="ts-modal-close" id="closeEventModal">
      <i class="fas fa-times"></i>
    </button>
  </div>
  <div class="ts-modal-body" id="eventModalBody">
    <!-- Content will be dynamically inserted here -->
  </div>
  <div class="ts-modal-footer">
    <button class="ts-btn ts-btn-primary" id="assignMovieModalBtn">
      <i class="fas fa-film"></i> Assign Movie
    </button>
    <button class="ts-btn ts-btn-danger" id="deleteEventBtn">
      <i class="fas fa-trash"></i> Delete Event
    </button>
    <button class="ts-btn ts-btn-secondary" id="closeEventModalBtn">Close</button>
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="ts-modal-backdrop" id="deleteConfirmBackdrop"></div>
<div class="ts-modal" id="deleteConfirmModal">
  <div class="ts-modal-header">
    <h3 class="ts-modal-title">Confirm Deletion</h3>
    <button class="ts-modal-close" id="closeDeleteConfirmModal">
      <i class="fas fa-times"></i>
    </button>
  </div>
  <div class="ts-modal-body">
    <p>Are you sure you want to delete this event? This action cannot be undone.</p>
  </div>
  <div class="ts-modal-footer">
    <button class="ts-btn ts-btn-secondary" id="cancelDeleteBtn">Cancel</button>
    <button class="ts-btn ts-btn-danger" id="confirmDeleteBtn">
      <i class="fas fa-trash"></i> Delete
    </button>
  </div>
</div>

<!-- Movie Selection Modal -->
<div class="ts-modal-backdrop" id="movieModalBackdrop"></div>
<div class="ts-modal" id="movieModal">
  <div class="ts-modal-header">
    <h3 class="ts-modal-title">Assign Movie to Plage</h3>
    <input type="hidden" id="currentPlageId" value="">
    <button class="ts-modal-close" id="closeMovieModal">
      <i class="fas fa-times"></i>
    </button>
  </div>
  <div class="ts-modal-body" id="movieModalBody">
    <div class="ts-plage-info" id="plageInfo">
      <!-- Plage information will be inserted here -->
    </div>
    
    <div class="ts-form-group">
      <label class="ts-form-label">Select Movie</label>
      <div class="ts-movie-list" id="movieList">
        <!-- Movies will be dynamically inserted here -->
      </div>
    </div>
    
    <div class="ts-kdm-legend">
      <h4>KDM Status Legend:</h4>
      <div class="ts-legend-items">
        <div class="ts-legend-item">
          <div class="ts-legend-color ts-kdm-expired"></div>
          <span>KDM Expired (Cannot select)</span>
        </div>
        <div class="ts-legend-item">
          <div class="ts-legend-color ts-kdm-warning"></div>
          <span>KDM expires within 1 week</span>
        </div>
        <div class="ts-legend-item">
          <div class="ts-legend-color ts-kdm-good"></div>
          <span>KDM valid (1+ weeks remaining)</span>
        </div>
      </div>
    </div>
  </div>
  <div class="ts-modal-footer">
    <button class="ts-btn ts-btn-secondary" id="removeMovieBtn">
      <i class="fas fa-times"></i> Remove Movie
    </button>
    <button class="ts-btn ts-btn-secondary" id="closeMovieModalBtn">Cancel</button>
    <button class="ts-btn ts-btn-primary" id="assignMovieBtn" disabled>
      <i class="fas fa-film"></i> Assign Movie
    </button>
  </div>
</div>