<!-- Configuration page html -->
<!DOCTYPE html>
<html class="adaptive">

<head>
  <title>EMHASS: Energy Management Optimization for Home Assistant</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="static/style.css?version=1">
  <link rel="icon" type="image/x-icon" href="static/img/emhass_logo_short.svg">
  <script src="static/configuration_script.js"></script>
</head>

<body style="margin: auto; align-items:center; text-align:center;">

  <div>
    <!-- Icons by feather https://github.com/feathericons/feather -->
    <div id="top-links">
      <!-- index page  -->
      <a href="index" title="Home" style="margin-right: 12px; cursor: pointer; z-index: 1">
        <svg class="feather">
          <use class="feather" href="static/img/feather-sprite.svg#home" />
        </svg>
      </a>
      <a href="https://emhass.readthedocs.io/en/latest/">
        <svg class="feather" title="EMHASS Docs" style="margin-right: 12px;" ;>
          <use class="feather" href="static/img/feather-sprite.svg#book" />
        </svg>
      </a>
      <a href="https://github.com/davidusb-geek/emhass" target="_blank" rel="noopener noreferrer">
        <svg class="feather" title="EMHASS Git repo" style="margin-right: 0px;">
          <use class="feather" href="static/img/feather-sprite.svg#git-branch" />
        </svg>
      </a>
    </div>

    <!-- Title -->
    <img src="static/img/emhass_icon.png" alt="">
    <h2>EMHASS: Energy Management Optimization for Home Assistant</h2>
  </div>
  <div class="header-footer">
    <h4>Configuration:</h4>
    <a id="json-toggle" title="List and Box view toggle">
      <svg id="json" class="feather" class="header-footer-button">
        <use class="feather" href="static/img/feather-sprite.svg#code" />
      </svg>
    </a>
  </div>

  <!-- parameter list/box elements section -->
  <div id=configuration-container>
  </div>
  <!-- configuration buttons (defaults, save, yaml) -->
  <div class="save_button header-footer">
    <button style="margin-right: 5px;" type="button" id="yaml" title="Convert yaml to json" class="">YAML</button>
    <button type="button" id="defaults" title="Restore to default parameter values" class="">Defaults</button>
    <button type="button" id="save" title="Save Config to EMHASS" class="">Save</button>
    <div class="loading-div"> <!-- dynamic tick/cross element -->
      <div id=loader></div> 
    </div>
  </div>
  <!-- alert box -->
  <div style="display: none;" id="alert" class="alert">
    <div>
      <span onclick="this.parentElement.parentElement.style.display='none';">&times;</span>
      <p id="alert-text"></p>
    </div>
  </div>
  <footer class="footer">
    <p style="margin-top:10px; text-align:center;">&copy; MIT License | Copyright (c) 2021-2025 David
      HERNANDEZ</p>
  </footer>
  </div>
</body>

</html>