<script type="text/javascript" src="<%= root_path %>javascripts/dashboard.js" nonce="<%= csp_nonce %>"></script>

<section>
  <header>
    <h1>
      <%= t('Dashboard') %>
      <span id="beacon" class="beacon"></span>
    </h1>
    <div class="filter interval-slider">
      <span class="interval-slider-label"><%= t('PollingInterval') %>:</span>
      <span id="sldr-text" class="current-interval">5 s</span>
      <br>
      <input id="sldr" aria-label="<%= t("PollingIntervalMilliseconds") %>" role="slider" type="range" min="2000" max="20000" step="1000" value="5000" autocomplete="off">
    </div>
  </header>

  <div class="chart">
    <span id="sr-last-dashboard-update-template" hidden><%= t("LastDashboardUpdateTemplateLiteral") %></span>
    <span id="sr-last-dashboard-update" class="sr-only" role="status"></span>

    <canvas id="realtime-chart">
      <%= to_json({
        processedLabel: t('Processed'),
        failedLabel: t('Failed'),
        labels: Array.new(50, ""),
        processed: Array.new(50),
        failed: Array.new(50),
        updateUrl: "#{root_path}stats",
      }) %>
    </canvas>

    <!-- start with a space in the legend so the height doesn't change when we add content dynamically -->
    <div id="realtime-legend">&nbsp;</div>
  </div>
</section>

<section>
  <header>
    <h2><%= t('History') %></h2>

    <div class="filter">
      <% d = url_params("days") %>
      <a href="<%= root_path %>?days=7" class="history-graph <%= "active" if d == "7" %>"><%= t('OneWeek') %></a>
      <a href="<%= root_path %>" class="history-graph <%= "active" if d.nil? || d == "30" %>"><%= t('OneMonth') %></a>
      <a href="<%= root_path %>?days=90" class="history-graph <%= "active" if d == "90" %>"><%= t('ThreeMonths') %></a>
      <a href="<%= root_path %>?days=180" class="history-graph <%= "active" if d == "180" %>"><%= t('SixMonths') %></a>
    </div>
  </header>

  <canvas id="history-chart">
    <%= to_json({
      processedLabel: t('Processed'),
      failedLabel: t('Failed'),
      processed: @processed_history.to_a.reverse,
      failed: @failed_history.to_a.reverse,
    }) %>
  </canvas>
</section>

<section>
  <header>
    <h2><%= store_name %></h2>
  </header>
  <div class="cards-container">
    <article>
      <h3 id="redis_version"><%= store_version %></h3>
      <p><%= t('Version') %></p>
    </article>

    <% if @redis_info.fetch("uptime_in_days", nil) %>
      <article>
        <h3 id="uptime_in_days"><%= @redis_info.fetch("uptime_in_days") %></h3>
        <p><%= t('Uptime') %></p>
      </article>
    <% end %>

    <% if @redis_info.fetch("connected_clients", nil) %>
      <article>
        <h3 id="connected_clients"><%= @redis_info.fetch("connected_clients") %></h3>
        <p><%= t('Connections') %></p>
      </article>
    <% end %>

    <% if @redis_info.fetch("used_memory_human", nil) %>
      <article>
        <h3 id="used_memory_human"><%= @redis_info.fetch("used_memory_human") %></h3>
        <p><%= t('MemoryUsage') %></p>
      </article>
    <% end %>

    <% if @redis_info.fetch("used_memory_peak_human", nil) %>
      <article>
        <h3 id="used_memory_peak_human"><%= @redis_info.fetch("used_memory_peak_human") %></h3>
        <p><%= t('PeakMemoryUsage') %></p>
      </article>
    <% end %>
  </div>
</section>

<script type="text/javascript" src="<%= root_path %>javascripts/chart.min.js" nonce="<%= csp_nonce %>"></script>
<script type="text/javascript" src="<%= root_path %>javascripts/chartjs-plugin-annotation.min.js" nonce="<%= csp_nonce %>"></script>
<script type="text/javascript" src="<%= root_path %>javascripts/chartjs-adapter-date-fns.min.js" nonce="<%= csp_nonce %>"></script>
<script type="text/javascript" src="<%= root_path %>javascripts/base-charts.js" nonce="<%= csp_nonce %>"></script>
<script type="text/javascript" src="<%= root_path %>javascripts/dashboard-charts.js" nonce="<%= csp_nonce %>"></script>
