<% assigns = assign_new(assigns, :map_page, fn -> false end) %>
<style>
  /* Map page constraints */
  body:has(#main-content[data-map-page="true"]) {
    overflow: hidden !important;
    height: 100vh !important;
  }

  /* Map page specific styles - hide site header */
  body:has(#main-content[data-map-page="true"]) .site-header {
    display: none;
  }

  body:has(#main-content[data-map-page="true"]) main {
    padding: 0;
    max-width: none;
    height: 100vh;
    overflow: hidden;
  }

  body:has(#main-content[data-map-page="true"]) main > div {
    max-width: none;
    height: 100%;
  }

  body:has(#main-content[data-map-page="true"]) .phx-main {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  body:has(#main-content[data-map-page="true"]) div[data-phx-main="true"] {
    height: 100vh;
    overflow: hidden;
  }

  /* Full page map for APRS home page and callsign pages */
  body:has(#main-content[data-map-page="true"]) #aprs-map {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 1 !important;
    transition: right 0.3s ease-in-out !important;
  }

  /* Desktop slideover behavior for map */
  @media (min-width: 1024px) {
    body:has(#main-content[data-map-page="true"]) #aprs-map.slideover-open {
      right: 352px !important;
    }

    body:has(#main-content[data-map-page="true"]) #aprs-map.slideover-closed {
      right: 0 !important;
    }
  }

  /* Mobile slideover behavior for map */
  @media (max-width: 1023px) {
    body:has(#main-content[data-map-page="true"]) #aprs-map {
      right: 0 !important;
    }
  }
</style>

<.header dev_mode={Application.get_env(:aprsme, :dev_routes, false)} current_user={@current_user} />
<main
  id="main-content"
  class={if assigns[:map_page], do: "min-h-screen", else: ""}
  data-map-page={to_string(assigns[:map_page] || false)}
>
  <div>
    <.flash kind={:info} title={gettext("Success!")} flash={@flash} />
    <.flash kind={:error} title={gettext("Error!")} flash={@flash} />
    <.flash
      id="disconnected"
      kind={:error}
      title={gettext("We can't find the internet")}
      close={false}
      autoshow={false}
      phx-disconnected={show("#disconnected")}
      phx-connected={hide("#disconnected")}
    >
      {gettext("Attempting to reconnect")}
      <.icon name="arrow-path" outline={true} class="ml-1 w-3 h-3 inline animate-spin" />
    </.flash>
    {@inner_content}
  </div>
</main>
