<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard - ESPHome</title>

    <link
      rel="shortcut icon"
      href="{{ get_static_file_url('images/favicon.ico') }}"
    />

    <link
      rel="stylesheet"
      href="{{ get_static_file_url('fonts/material-icons/material-icons.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ get_static_file_url('css/vendor/materialize/materialize.min.css') }}"
    />
    <link
      rel="stylesheet"
      href="{{ get_static_file_url('css/esphome.css') }}"
    />

    <script src="{{ get_static_file_url('js/vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ get_static_file_url('js/vendor/jquery-ui/jquery-ui.min.js') }}"></script>
    <script src="{{ get_static_file_url('js/vendor/jquery-validate/jquery.validate.min.js') }}"></script>
    <script src="{{ get_static_file_url('js/vendor/materialize/materialize.min.js') }}"></script>

    {% if streamer_mode %}
    <style>
      .log-secret {
        visibility: hidden !important;
      }
    </style>
    {% end %}
  </head>

  <body>
    <div class="navbar-fixed">
      <nav class="grey lighten-2">
        <div class="nav-wrapper">
          <a href="#" class="black-text logo-wrapper">
            <img
              src="https://esphome.io/_static/logo-text.svg"
              alt="ESPHome Logo"
              class="logo"
            />
          </a>

          <ul class="nav-icons right">
            <li>
              <a class="dropdown-trigger" href="#!" data-target="nav-dropdown"
                ><i class="material-icons">more_vert</i></a
              >
            </li>
          </ul>
        </div>

        <ul id="nav-dropdown" class="select-action dropdown-content">
          <li>
            <a data-action="update-all" data-filename="{{ escape(config_dir) }}"
              >Update All</a
            >
          </li>
          <li>
            <a data-action="edit" data-filename="secrets.yaml"
              >Secrets Editor</a
            >
          </li>
          <li class="divider"></li>
          {% if login_enabled %}
          <li><a href="{{ relative_url }}logout">Logout</a></li>
          {% end %}
        </ul>
      </nav>
    </div>

    <main>
      <div id="nodes" class="container">
        <div id="grid" class="grid">
          {% for i, entry in enumerate(entries) %}
          <div
            class="card status-unknown"
            data-node-name="{{ entry.name }}"
            data-filename="{{ entry.filename }}"
          >
            <div class="card-content black-text">
              <span class="card-title">
                <span class="node-name">{{ escape(entry.name) }}</span>

                <i
                  class="material-icons right dropdown-trigger"
                  data-target="dropdown-{{ i }}"
                  >more_vert</i
                >

                {% if 'web_server' in entry.loaded_integrations %}
                <a href="http://{{ escape(entry.address) }}" target="_blank"
                  ><i
                    class="material-icons node-webserver right tooltipped"
                    data-position="left"
                    data-tooltip="Open Node Web Server Interface"
                    >launch</i
                  ></a
                >
                {% end %} {% if entry.update_available %}
                <i
                  class="material-icons node-update-avaliable right tooltipped"
                  data-position="left"
                  data-tooltip="Update Available: {{ entry.update_old }} &#x27A1;&#xFE0F;{{ entry.update_new }}"
                  >system_update</i
                >
                {% end %}
              </span>

              <div class="node-config-path">
                <code
                  class="inlinecode tooltipped"
                  data-position="bottom"
                  data-tooltip='Full Path: <code class="inlinecode">{{ escape(entry.path) }}</code>'
                >
                  {{ escape(entry.filename) }}
                </code>
              </div>

              <div class="online-status">
                <span class="indicator"></span>
              </div>

              {% if entry.comment %}
              <div class="node-card-comment">{{ escape(entry.comment) }}</div>
              {% end %}
            </div>
            <div class="card-action">
              <a data-action="edit" data-filename="{{ entry.filename }}"
                >Edit</a
              >
              <a data-action="validate" data-filename="{{ entry.filename }}"
                >Validate</a
              >
              <a data-action="upload" data-filename="{{ entry.filename }}"
                >Install</a
              >
              <a data-action="logs" data-filename="{{ entry.filename }}"
                >Logs</a
              >
            </div>
            <ul
              id="dropdown-{{ i }}"
              class="
                select-action
                dropdown-content
                card-dropdown-action
                node-dropdown
              "
            >
              <li>
                <a data-action="clean-mqtt" data-filename="{{ entry.filename }}"
                  >Clean MQTT</a
                >
              </li>
              <li>
                <a data-action="clean" data-filename="{{ entry.filename }}"
                  >Clean Build Files</a
                >
              </li>
              <li class="divider"></li>
              <li>
                <a data-action="delete" data-filename="{{ entry.filename }}"
                  >Delete</a
                >
              </li>
            </ul>
          </div>
          {% end %}
        </div>
      </div>

      {% if len(entries) == 0 %}
      <div class="center">
        <h5>Welcome to ESPHome</h5>
        <p>It looks like you don't yet have any nodes.</p>
        <p>
          <button type="button" data-action="wizard" class="btn green">
            <i class="material-icons left">add</i>
            Add node
          </button>
        </p>
      </div>
      {% end %}

      <!-- Config Editor Modal -->
      <div id="js-editor-modal" class="modal modal-fixed-footer no-autoinit">
        <div class="modal-content">
          <h4>
            Editing: <code id="js-node-filename" class="inlinecode"></code>
          </h4>

          <div id="js-loading-indicator">
            <div class="preloader-wrapper big active">
              <div class="spinner-layer spinner-blue-only">
                <div class="circle-clipper left">
                  <div class="circle"></div>
                </div>
                <div class="gap-patch">
                  <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                  <div class="circle"></div>
                </div>
              </div>
            </div>
          </div>

          <div id="js-editor-area" class="editor"></div>
        </div>
        <div class="modal-footer">
          <a class="waves-effect waves-green btn-flat" data-action="save"
            >Save</a
          >
          <a
            class="modal-close waves-effect waves-green btn-flat"
            data-action="upload"
            >Install</a
          >
          <a
            class="modal-close waves-effect waves-green btn-flat"
            data-action="close"
            >Close</a
          >
        </div>
      </div>

      <!-- Add New Node / Launch Wizard Button -->
      <div class="fixed-action-btn">
        <a
          class="btn-floating btn-large waves-effect waves-light green"
          id="js-wizard"
          data-action="wizard"
        >
          <i class="large material-icons">add</i>
        </a>
      </div>
    </main>

    <footer class="page-footer grey darken-4">
      <div class="container">
        <div class="left">
          Copyright © 2019-2021 ESPHome | Made with
          <a href="https://materializecss.com/" target="_blank">Materialize</a>
        </div>
        <div class="right">
          <a href="{{ docs_link }}" target="_blank" rel="noreferrer"
            >v{{ version }} Documentation</a
          >
        </div>
      </div>
    </footer>

    <script
      src="{{ get_static_file_url('js/vendor/ace/ace.js') }}"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="{{ get_static_file_url('js/esphome/index.js') }}"
      type="module"
    ></script>

    {% if begin and len(entries) == 1 %}
    <script>
      window.history.replaceState({}, document.title, "/");
      document.addEventListener("DOMContentLoaded", () => {
        M.toast({
          html: "🎉 Congratulations on adding your first Node!",
          displayLength: 10000,
        });
      });
    </script>
    {% end %}
  </body>
</html>
