<% if helpers.asset_available?("spina/view_template_previews/#{@page.view_template}.png") %>
  <div class="relative" data-controller="reveal" data-reveal-away-value>
    <button type="button" class="btn text-gray-400 border-none hover:text-gray-700" data-action="reveal#toggle">
      <%= helpers.heroicon('eye', style: :solid, class: 'w-4 h-4 mr-2') %>
      <%=t 'spina.pages.preview' %>
    </button>
    
    <div class="absolute left-1/2 transform -translate-x-1/2">
      <div hidden data-reveal data-transition class="w-60 bg-white shadow-lg rounded-md">
        <%= image_tag "spina/view_template_previews/#{@page.view_template}.png", class: "block w-full rounded-md" %>
      </div>
    </div>
  </div>
<% end %>

<!-- Advanced actions -->
<div class="relative w-1/2 md:w-auto" data-controller="reveal" data-reveal-away-value>
  <button type="button" class="btn btn-default px-3 w-full" data-action="reveal#toggle">
    <svg class="w-5 h-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
    </svg>
  </button>

  <div hidden data-reveal data-transition class="origin-top-left md:origin-top-right absolute md:right-0 mt-2 w-56 rounded-md shadow-lg border border-gray-200">
    <div class="rounded-md bg-white shadow-xs">
      <div class="py-1">
        
        <% unless @page.homepage? %>
          <%= link_to t('spina.pages.move_page') + "...", helpers.spina.new_admin_page_move_path(@page), class: "block px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} %>
        <% end %>
        
        <% if !@page.custom_page? %>
          <%= link_to t('spina.pages.change_view_template') + "...", helpers.spina.edit_template_admin_page_path(@page), class: "block px-4 py-2 text-sm font-medium leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900", data: {turbo_frame: "modal", action: "reveal#hide"} %>
        <% end %>
        
        <% if @locale.to_sym != I18n.locale.to_sym %>
          <% @page.translations.where(locale: @locale).each do |translation| %>
            <%= button_to t("spina.page_translations.delete", translation: @locale.upcase), helpers.spina.admin_page_translation_path(translation), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.page_translations.delete_confirmation', subject: @locale.upcase)}} %>
          <% end %>
        <% end %>
        
        <% if @page.deletable? %>
          <%= button_to t('spina.pages.delete'), helpers.spina.admin_page_path(@page), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.pages.delete_confirmation', subject: sanitize(@page.title))}} %>
        <% else %>
          <span class="block px-4 py-2 text-sm leading-5 text-gray-400"><%=t 'spina.pages.cannot_be_deleted' %></span>
        <% end %>
      </div>
    </div>
  </div>
</div>

<!-- Translations -->
<%= render Spina::Pages::TranslationsComponent.new(@page, label: @locale.upcase) %>

<button type="submit" form="<%= dom_id(@page) %>" class="btn btn-primary w-1/2 md:w-auto" data-controller="button hotkeys" data-hotkeys="command+s, ctrl+s" data-hotkeys-target="button" data-action="button#loading" data-loading-message="Saving...">
  <%= helpers.heroicon('check', style: :mini, class: 'w-5 h-5 -ml-1 mr-1') %>
  <% if @page.draft? %>
    <%=t 'spina.pages.save_draft' %>
  <% else %>
    <%=t 'spina.pages.save_changes' %>
  <% end %>
</button>

<!-- Saving -->
<% if @page.persisted? && @page.draft? %>
  <button type="submit" form="<%= dom_id(@page) %>" name="page[draft]" value="false" class="btn bg-emerald-500 hover:bg-emerald-600 border-emerald-600 text-white flex items-center" data-controller="hotkeys" data-hotkeys="control+command+s" data-hotkeys-target="button">
    <%= helpers.heroicon('cursor-arrow-rays', style: :solid, class: "w-5 h-5 -ml-1 mr-1") %>
    <%=t 'spina.pages.publish' %>
  </button>
<% end %>
