<!DOCTYPE html>
<html>
  <head>
    <title><%= @title.present? ? "#{@title} | #{t('.site_title')}" : t(".site_title") %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= javascript_importmap_tags %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>

  <body>
    <header>
      <nav>
        <ul>
          <li><%= link_to t(".home"), root_path %></li>
          <li><%= link_to t(".blog_posts"), blog_posts_path %></li>
          <li><%= link_to t(".microposts"), microposts_path %></li>
          <% if logged_in? %>
            <li><%= link_to t(".diary_entries"), diary_entries_path %></li>
            <li><%= link_to t(".profile"), user_path(current_user) %></li>
            <li><%= link_to t(".log_out"), log_out_path, data: { turbo_method: :delete } %></li>
          <% end %>
        </ul>
      </nav>
      <%= link_to root_path do %>
        <h1><%= t(".site_title") %></h1>
      <% end %>
    </header>
    <main>
      <%= render "shared/flash" %>
      <%= yield %>
    </main>
  </body>
</html>
