.container.my-5
  / Header section with title and description
  .row.mb-4
    .col-12
      h1.display-4.fw-bold.text-primary.mb-2 
        i.bi.bi-gear-fill.me-2
        | Platform Management
      p.lead.text-muted Manage and access administrative views and controls

  / Cards grid for view links
  .row.row-cols-1.row-cols-md-2.row-cols-xl-3.g-4
    - @admin_views.each do |view|
      .col
        .custom-card
          .card.h-100.shadow-sm.border-0.hover-effect
            .card-body.p-4.d-flex.flex-column
              / View icon and title
              .d-flex.align-items-center.mb-3
                .view-icon.bg-primary.bg-opacity-10.d-flex.align-items-center.justify-content-center.me-3 style="width: 48px; height: 48px; border-radius: 50%;"
                  i.bi.bi-window-stack.text-primary.fs-4
                h3.card-title.h5.mb-0= view.title

              / View description
              p.card-text.text-muted= view.description

              / Action buttons - pushed to bottom with mt-auto
              .d-flex.justify-content-between.align-items-center.mt-auto
                = link_to view.path, class: "btn btn-primary d-flex align-items-center gap-2", 
                  target: "_blank", data: { bs_toggle: "tooltip" }, title: "Open in new tab" do
                  span Open
                  i.bi.bi-box-arrow-up-right

                - if view.needs_attention
                  span.badge.bg-warning.text-dark
                    i.bi.bi-exclamation-circle.me-1
                    | Needs Review

css:
  .hover-effect {
    transition: all 0.3s ease;
  }
  .hover-effect:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  }
  .view-icon {
    min-width: 48px;
  }