<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "Badar Madeena" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= yield :head %>

    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    <!-- Bootstrap CSS for modern UI -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      body {
        background-color: #181a1b !important;
        color: #e0e0e0 !important;
      }
      .bg-white {
        background-color: #23272b !important;
        color: #e0e0e0 !important;
      }
      .navbar, .footer {
        background-color: #23272b !important;
      }
      .navbar-brand, .footer, .text-muted {
        color: #e0e0e0 !important;
      }
      .alert-success {
        background-color: #1e2d24 !important;
        color: #b8e994 !important;
        border-color: #1e2d24 !important;
      }
      .alert-danger {
        background-color: #2d1e1e !important;
        color: #ff6f61 !important;
        border-color: #2d1e1e !important;
      }
      .form-label, label {
        color: #e0e0e0 !important;
      }
      input, textarea, select {
        background-color: #181a1b !important;
        color: #e0e0e0 !important;
        border: 1px solid #444 !important;
      }
      .btn-primary {
        background-color: #007bff !important;
        border-color: #007bff !important;
      }
      .btn {
        color: #e0e0e0 !important;
      }
    </style>

    <%# Includes all stylesheet files in app/assets/stylesheets %>
    <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>

  <body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg glass-navbar shadow-sm">
  <div class="container-fluid">
    <!-- Logo & Brand -->
    <%= link_to root_path, class: "navbar-brand d-flex align-items-center" do %>
      <%= image_tag("unnamed.jpg", alt: "Logo", class: "nav-logo me-2") %>
      <span>Badar Madeena Trust</span>
    <% end %>

    <!-- Toggler (for mobile) -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
      aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Nav Links -->
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <%= link_to "🏠 Home", root_path, class: "nav-link active" %>
        </li>
        <li class="nav-item">
          <%= link_to "🏫 Institutions", institutions_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "🎓 Programs", programs_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "🕌 Ziyara", ziyaras_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "📞 Contact", "#", class: "nav-link" %>
        </li>
      </ul>
    </div>
  </div>
</nav>
<style>
/* ====== NAVBAR STYLING ====== */
.glass-navbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid rgba(30, 136, 229, 0.2);
  font-family: "Poppins", sans-serif;
  padding: 10px 30px;
  transition: all 0.3s ease;
}

.glass-navbar .navbar-brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: #1e88e5;
  background: linear-gradient(90deg, #1e88e5, #43a047);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-logo {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.navbar-nav .nav-link {
  font-weight: 600;
  color: #2c3e50 !important;
  padding: 8px 18px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  background: linear-gradient(90deg, #1e88e5, #43a047);
  color: white !important;
  box-shadow: 0 3px 10px rgba(30, 136, 229, 0.2);
}

.navbar-toggler {
  border: none;
  background: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(30,136,229, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

@media (max-width: 992px) {
  .glass-navbar {
    padding: 8px 20px;
  }
  .navbar-nav .nav-link {
    text-align: center;
    margin-bottom: 5px;
  }
}
</style>

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

<% content_for :title, "Institutions & Programs" %>



    <div class="container shadow rounded p-4 bg-white mt-4">
      <% if notice %>
        <div class="alert alert-success"><%= notice %></div>
      <% end %>
      <% if alert %>
        <div class="alert alert-danger"><%= alert %></div>
      <% end %>
      <%= yield %>
    </div>
    <footer class="footer text-center mt-5 mb-3 text-muted">
      &copy; <%= Time.current.year %> Badar Madeena
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
