<div id="public_id" data-content="<%= @instance.public_id %>"></div>
<div hx-get="" hx-trigger="<%= Rails.env == "development" ? "every 5m" : "every 5s" %>" hx-swap="outerHTML" hx-select="#container" hx-target="#container">
  <header>
    <div class="title">
      <%= link_to root_path do %><img src="/icon.png" width="50" alt="eureka.coffee logo" /><% end %>
      <h1><span class="muted">instance</span> <%= @instance.name %></h1>
      <%= render partial: "zone_img", locals: { zone: @instance.zone, alt: @instance.zone, title: @instance.zone.upcase_first } %>
      <div class="needs_pwd">
        password: <span id="password">???</span>
      </div>
      <div class="no_pwd">
        <%= form_with url: authenticate_to_instance_path do |form| %>
          <%= form.text_field :password, placeholder: "enter password..." %>
          <%= form.hidden_field :instance, value: @instance.public_id %>
          <%= form.submit "submit" %>
        <% end %>
      </div>
    </div>
    <div class="right">
      <div class="copyable" data-copy-content="Tracker: <%= show_instance_url(@instance.public_id) %>">copy tracker url</div>
      <div class="copyable needs_pwd" data-copy-content="Tracker: <%= show_instance_url(@instance.public_id) %>, Password: ???">copy tracker url and password</div>
    </div>
  </header>

  <main id="container">
    <%= render partial: "list", locals: { instance: @instance, forecast: @forecast } %>

    <div class="sidebar">
      <div class="time">ET <%= Clock.display_ez_time(Clock.get_current_eorzea_time) %></div>
      <div class="weather-list">
        <div class="weather">
          <img src="/weather/<%= @forecast[0][:curr_weather] %>.png" width="25" title="<%= @forecast[0][:weather_name] %>" />
          <div>now</div>
        </div>
        <% 4.times do |i| %>
          »
          <div class="weather">
            <img src="/weather/<%= @forecast[i + 1][:curr_weather] %>.png" width="25" title="<%= @forecast[i + 1][:weather_name] %>" />
            <div><%= ((@forecast[i + 1][:time] - Time.now.utc) / 1.minutes).ceil %>m</div>
          </div>
        <% end %>
      </div>

      <div>
        <%= render partial: "fairies", locals: { instance: @instance } %>
        <%= render partial: "sprites", locals: { instance: @instance, forecast: @forecast } %>
      </div>
    </div>
  </main>

  <%= javascript_include_tag "list" %>
</div>