// prettier-ignore
{% extends base.template.html %}

{% block title %}Dashboard{% end %}

{% block header %}
<esphome-header-menu
  logout-url="{% if login_enabled %}{{ relative_url }}logout{% end %}"
></esphome-header-menu>
{% end %}

{% block main %}
<esphome-devices-list></esphome-devices-list>
<esphome-fab></esphome-fab>
{% end %}

{% block footer %}
<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>

<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>

<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">
    <mwc-button label="Save" data-action="save"></mwc-button>
    <mwc-button
      class="modal-close"
      label="Install"
      data-action="upload"
    ></mwc-button>
    <mwc-button
      class="modal-close"
      label="Close"
      data-action="close"
    ></mwc-button>
  </div>
</div>
{% end %}