<p class="text-success"><%= notice %></p>

<div class="container mt-4">
  <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
    <!-- Header -->
    <div class="card-header bg-gradient bg-primary text-white text-center py-4">
      <h2 class="fw-bold mb-0"><%= @program.name.titleize %></h2>
      <small class="text-light fst-italic">Program Details</small>
    </div>

    <!-- Body -->
    <div class="card-body bg-light">
      <div class="row g-4">
        <div class="col-md-6">
          <div class="card border-0 shadow-sm rounded-3 p-3 h-100">
            <h6 class="text-secondary mb-1">📅 Date</h6>
            <p class="fs-5 fw-semibold text-dark"><%= @program.date.strftime("%B %d, %Y") rescue @program.date %></p>
          </div>
        </div>

        <% if @program.respond_to?(:leadingPerson) && @program.leadingPerson.present? %>
          <div class="col-md-6">
            <div class="card border-0 shadow-sm rounded-3 p-3 h-100">
              <h6 class="text-secondary mb-1">👤 Leading Person</h6>
              <p class="fs-5 fw-semibold text-dark"><%= @program.leadingPerson.titleize %></p>
            </div>
          </div>
        <% end %>
      </div>
    </div>

    <!-- Footer -->
    <div class="card-footer bg-white border-top d-flex justify-content-between align-items-center py-3">
      <div>
        <%= link_to "← Back to Programs", programs_path, class: "btn btn-outline-secondary btn-sm" %>
        <%= link_to "✏️ Edit Program", edit_program_path(@program), class: "btn btn-outline-primary btn-sm ms-2" %>
      </div>

      <div>
        <%= button_to "🗑️ Delete", @program, method: :delete, data: { confirm: "Are you sure you want to delete this program?" }, class: "btn btn-danger btn-sm" %>
      </div>
    </div>
  </div>
</div>
