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

    <%= yield :head %>

    <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">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
    <style>
      body {
        font-family: 'Lato', sans-serif;
        background-image: url('<%= asset_path("background.png") %>');
        background-repeat: repeat;
        background-attachment: fixed;
        background-size: 1920px; /* Adjust as needed */
      }
      h1, h2, h3, h4, h5, h6, .font-cinzel {
        font-family: 'Cinzel', serif;
      }
      .diplomacy-card {
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid #d4c5a9;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      }
      .diplomacy-text-gold {
        color: #c5a059;
      }
    </style>
  </head>

  <body class="text-gray-900 leading-normal tracking-normal">
    <nav class="bg-green-900/95 backdrop-blur-sm border-b border-[#c5a059] fixed w-full z-30 top-0 shadow-lg">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
            </div>
            <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
              <%= link_to root_path, class: "border-transparent text-green-100 hover:text-[#c5a059] hover:border-[#c5a059] inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200" do %>
                <i class="fa-solid fa-house mr-2"></i> トップ
              <% end %>
              <%= link_to new_game_path, class: "border-transparent text-green-100 hover:text-[#c5a059] hover:border-[#c5a059] inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200" do %>
                <i class="fa-solid fa-plus-circle mr-2"></i> New Game
              <% end %>
              <% if logged_in? && current_user.admin? %>
                <%= link_to users_path, class: "border-transparent text-green-100 hover:text-[#c5a059] hover:border-[#c5a059] inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200" do %>
                  <i class="fa-solid fa-users-cog mr-2"></i> ユーザー管理
                <% end %>
              <% end %>
            </div>
          </div>
          <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
            <% if logged_in? %>
              <%= link_to user_path(current_user), class: "text-sm text-green-100 hover:text-[#c5a059] transition-colors duration-200 flex items-center" do %>
                <i class="fa-solid fa-user-shield mr-2"></i>
                <%= current_user.username %>さん
                <% if current_user.admin? %>
                  <span class="ml-1 px-2 py-0.5 text-[10px] font-bold text-green-900 bg-[#c5a059] rounded border border-yellow-600">ADMIN</span>
                <% end %>
              <% end %>
              <%= button_to logout_path, method: :delete, class: "inline-flex items-center px-3 py-1.5 border border-[#c5a059] shadow-sm text-sm font-medium rounded text-[#c5a059] bg-green-900 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#c5a059] transition-colors duration-200" do %>
                <i class="fa-solid fa-right-from-bracket mr-2"></i> ログアウト
              <% end %>
            <% else %>
              <%= link_to "ログイン", login_path, class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
              <%= link_to "新規登録", signup_path, class: "inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
            <% end %>
          </div>
        </div>
      </div>
    </nav>

    <div class="pt-24 pb-12 min-h-screen">
      <%= yield :top_content %>
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 bg-white/85 backdrop-blur-sm rounded-xl shadow-xl border border-white/20 py-8">
        <% if notice %>
          <div class="bg-green-100/90 border border-green-400 text-green-800 px-4 py-3 rounded relative mb-6" role="alert">
            <span class="block sm:inline"><%= notice %></span>
          </div>
        <% end %>

        <% if alert %>
          <div class="bg-red-100/90 border border-red-400 text-red-800 px-4 py-3 rounded relative mb-6" role="alert">
            <span class="block sm:inline"><%= alert %></span>
          </div>
        <% end %>

        <main>
          <%= yield %>
        </main>
      </div>
    </div>
  </body>
</html>
