<div class="container-fluid min-vh-100 p-4 gradient-bg">
  <% if notice %>
    <div class="alert alert-success"><%= notice %></div>
  <% end %>

  <!-- Institution Header Card -->
  <div class="card institution-card shadow mb-4 p-4">
    <h1 class="institution-name mb-3 text-primary"><%= @institution.name %></h1>
    <div class="btn-group">
      <%= link_to "Edit Institution", edit_institution_path(@institution), class: "btn btn-secondary me-2" %>
      <%= link_to "Back to Institutions", institutions_path, class: "btn btn-outline-light me-2" %>
      <%= button_to "Destroy Institution", @institution, method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-danger" %>
      <%= link_to "➕ New Student", new_institution_student_path(@institution), class: "btn btn-primary ms-2" %>
    </div>
  </div>

  <!-- Students Section -->
  <h2 class="mb-3 text-white">Students</h2>
  <% if @students.present? && @students.any? %>
    <div class="row g-4">
      <% @students.each do |student| %>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="student-card shadow p-3">
            <h4 class="student-name"><%= student.first_name %> <%= student.last_name %></h4>
            <p class="student-info"><strong>Place:</strong> <%= student.place %></p>
            <p class="student-info">
              <strong>Institution:</strong>
              <% if student.institution.present? %>
                <%= link_to student.institution.name, institution_path(student.institution), class: "badge badge-primary" %>
              <% else %>
                <span class="badge badge-secondary">No institution</span>
              <% end %>
            </p>
            <% view_path = @institution.present? ? institution_student_path(@institution, student) :
                            (student.institution.present? ? institution_student_path(student.institution, student) : student_path(student)) %>
            <%= link_to "View →", view_path, class: "btn-small" %>
          </div>
        </div>
      <% end %>
    </div>
  <% else %>
    <p class="text-center text-white mt-4">No students found.</p>
  <% end %>
</div>

<!-- Styles -->
<style>
/* Background Gradient Animation */
.gradient-bg {
  background: linear-gradient(-45deg, #1e88e5, #43a047, #6a1b9a, #d81b60);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  min-height: 100vh;
  padding-bottom: 40px;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Institution Card */
.institution-card {
  background-color: rgba(24, 26, 27, 0.95);
  color: #e0e0e0;
  border-radius: 12px;
}

/* Buttons */
.btn-primary {
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  transition: 0.2s ease;
}
.btn-primary:hover { background: #1e4fc4; transform: translateY(-2px); }

.btn-secondary, .btn-outline-light, .btn-danger {
  transition: 0.2s ease;
}

/* Student Cards */
.student-card {
  background-color: #181a1b;
  color: #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
}

.student-name { font-weight: 600; font-size: 1.1rem; margin-bottom: 6px; }

.student-info { font-size: 0.9rem; margin: 2px 0; color: #a0a0a0; }

.btn-small {
  background: #10b981;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  text-align: center;
  transition: 0.2s ease;
  margin-top: 8px;
}
.btn-small:hover { background: #0a8d63; }

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  margin-top: 2px;
}
.badge-primary { background: #2563eb; }
.badge-secondary { background: #6b7280; }
</style>
