<div class="lg:flex lg:items-center lg:justify-between">
  <div class="min-w-0 flex-1">
    <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight"><%= @project.title %></h2>
  </div>

  <div class="mt-5 flex lg:ml-4 lg:mt-0">
    <span class="hidden sm:block">
      <button data-controller="dark-mode" data-action="click->dark-mode#toggle" class="btn btn-default">Dark Mode</button>

      <%= link_to edit_project_path(@project), class: "btn btn-default" do %>
        Edit
      <% end %>
      <%= link_to projects_path, class: "btn btn-default" do %>Projects<% end %>

      <span data-controller="dialog copy">
        <button data-action="click->dialog#show" class="btn btn-primary-subtle">
          Deploy
        </button>
        <div data-dialog-target="modal" class="hidden fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
          <div data-action="click->dialog#hide" class="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
          <div class="flex items-end justify-center min-h-full p-4 text-center sm:items-center">
            <div class="relative bg-white dark:bg-gray-900 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 md:max-w-3xl sm:w-full">
              <div class="px-4 pt-5 pb-4 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Installation Instructions</h3>
                <div class="mt-2">
                  <p class="text-sm text-gray-light">
                    You'll make a cURL request from each server that you want to monitor.
                    Copy and paste the script below to each server to start sending metrics to your dashboard.
                  </p>
                  <button data-action="click->copy#copy" class="rounded-md bg-blue-500 mt-4 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600">
                    Copy
                  </button>
                    <pre data-copy-target="source" class="bg-gray-700 text-white p-4 mt-4 text-sm overflow-x-auto">curl -sSL <%= project_script_url(@project.token) %> | sh</pre>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </span>

    </span>
  </div>
</div>

<% @services.each do |hostname, services| %>
  <div class="py-4 sm:py-8">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl lg:max-w-none">
        <div class="text-center">
          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"><%= hostname %></h2>
        </div>
        <dl class="mt-8 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
          <%= turbo_frame_tag dom_id(@project, [hostname, :cpu_usage].join('-')),
            src: project_dashboards_cpu_usage_path(project_id: @project.token, hostname: hostname),
            "data-controller": "refresh",
            "data-refresh-src-value": project_dashboards_cpu_usage_path(project_id: @project.token, hostname: hostname),
            "data-refresh-interval-value": 30000 %>

          <%= turbo_frame_tag dom_id(@project, [hostname, :memory_usage].join('-')),
            src: project_dashboards_memory_usage_path(project_id: @project.token, hostname: hostname),
            "data-controller": "refresh",
            "data-refresh-src-value": project_dashboards_memory_usage_path(project_id: @project.token, hostname: hostname),
            "data-refresh-interval-value": 30000 %>

          <%= turbo_frame_tag dom_id(@project, [hostname, :disk_free].join('-')),
            src: project_dashboards_disk_free_path(project_id: @project.token, hostname: hostname),
            "data-controller": "refresh",
            "data-refresh-src-value": project_dashboards_disk_free_path(project_id: @project.token, hostname: hostname),
            "data-refresh-interval-value": 60000 %>

          <%= turbo_frame_tag dom_id(@project, [hostname, :last_seen].join('-')),
            src: project_dashboards_last_seen_path(project_id: @project.token, hostname: hostname),
            "data-controller": "refresh",
            "data-refresh-src-value": project_dashboards_last_seen_path(project_id: @project.token, hostname: hostname),
            "data-refresh-interval-value": 60000 %>
        </dl>
        <dl class="mt-8 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-1 lg:grid-cols-2">
          <%= turbo_frame_tag dom_id(@project, [hostname, :cpu_history].join('-')),
            src: project_dashboards_cpu_history_path(project_id: @project.token, hostname: hostname),
            "data-controller": "refresh",
            "data-refresh-src-value": project_dashboards_cpu_history_path(project_id: @project.token, hostname: hostname),
            "data-refresh-interval-value": 60000 %>
          <%= turbo_frame_tag dom_id(@project, [hostname, :memory_history].join('-')),
            src: project_dashboards_memory_history_path(project_id: @project.token, hostname: hostname),
            "data-controller": "refresh",
            "data-refresh-src-value": project_dashboards_memory_history_path(project_id: @project.token, hostname: hostname),
            "data-refresh-interval-value": 60000 %>
        </dl>
      </div>
    </div>
  </div>
<% end %>