<!DOCTYPE html>
<html class="theme-<%= BulletTrain::Themes::Light.color %> <%= "theme-secondary-#{BulletTrain::Themes::Light.secondary_color}" if BulletTrain::Themes::Light.secondary_color %> <%= "theme-logo-color-shift" if BulletTrain::Themes::Light.logo_color_shift %>">
<head>
<%= render 'shared/layouts/head' %>
</head>
<body class="bg-light-gradient text-gray-700 text-sm font-normal dark:bg-dark-gradient dark:text-darkPrimary-300">
<div class="p-4 bg-primary-900 electron-draggable electron-title-bar hidden electron-mobile-only"></div>
<div class="md:p-5 main-container-padding">
<div class="h-screen md:h-auto md:rounded-lg flex shadow main-container"
data-controller="mobile-menu"
data-mobile-menu-hidden-class="hidden"
>
<%= render "account/shared/menu/mobile" %>
<% if BulletTrain::Themes::Light.navigation == :left %>
<div class="hidden lg:flex lg:flex-shrink-0 bg-gradient-to-b from-primary-700 to-primary-800 dark:from-darkPrimary-800 dark:to-darkPrimary-800 md:rounded-l-lg">
<div class="w-64">
<%= render "account/shared/menu/sidebar" %>
</div>
</div>
<% end %>
<div class="flex flex-col w-0 flex-1 bg-gray-100 dark:bg-darkPrimary-800 dark:border-gray-500 md:rounded-lg <%= BulletTrain::Themes::Light.navigation == :left ? "lg:border-l lg:rounded-l-none" : "" %>">
<% if BulletTrain::Themes::Light.navigation == :top %>
<div class="hidden lg:flex bg-gradient-to-b from-primary-700 to-primary-800 dark:from-darkPrimary-800 dark:to-darkPrimary-800 md:rounded-t-lg">
<%= render "account/shared/menu/top" %>
</div>
<% end %>
<main class="flex-1 relative z-0 focus:outline-none" tabindex="0">
<div class="flex flex-row items-center shadow-sm electron-draggable">
<%= render "account/shared/menu/open" %>
<nav class="flex px-1 lg:px-4 py-2 select-none" aria-label="Breadcrumb">
<ol class="breadcrumb whitespace-nowrap flex items-center space-x-3 py-0.5 pr-3">
<%= render('breadcrumbs').strip.html_safe %>
</ol>
</nav>
</div>
<div class="py-2 px-1">
<div class="mx-auto px-4 sm:px-6 py-4">
<%= yield %>
</div>
</div>
</main>
</div>
</div>
</div>
</body>
</html>