<!DOCTYPE html>
<html lang="en" data-theme="light">
  <head>
    <script>
      // Initialize theme immediately to prevent flash
      (function() {
        var stored = localStorage.getItem('theme');
        var systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        var theme = stored || (systemDark ? 'dark' : 'light');
        document.documentElement.setAttribute('data-theme', theme);
      })();
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{config.PAGE_TITLE}}</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico')}}" sizes="any"/>
    <link rel="icon" href="{{ url_for('static', filename='favicon.svg')}}" type="image/svg+xml"/>

    {%- filter indent(width=4) %}
    {%- if config.OFFLINE_MODE %}
    {%- include "_static_offline.html" %}
    {%- else %}
    {%- include "_static_online.html" %}
    {%- endif %}
    {%- endfilter %}

    {#- CSS LOCAL #}
    <link href="{{ url_for('static', filename='css/puppetboard.css') }}" rel="stylesheet" />

    {#- JS LOCAL #}
    <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
    <script src="{{ url_for('static', filename='js/scroll.top.js') }}"></script>
    <script src="{{ url_for('static', filename='js/pretty.js') }}"></script>

    {%- block script %}{% endblock script %}
    <script type="text/javascript">
      {%- block javascript %}{% endblock javascript %}
      $(document).ready(function(){
        $(".ui.select-environment").dropdown({
          match: 'text',
          ignoreCase: true,
          selectOnKeydown: false,
          hideDividers: 'empty',
          onChange(value) {
            $(this).addClass('loading')
            window.location.href = value;
          }
        });
        $(".ui.dropdown:not(.ui.select-environment)").dropdown();
        {% block onload_script %} {% endblock onload_script %}
      })
    </script>
    {%- block head %}{% endblock head %}
  </head>

  <body>
    <div class="ui darkblue inverted large menu">
      <div class="title item">
        Puppetboard
      </div>
      {%- for endpoint, caption in menu_entries %}
      <a {% if endpoint == request.endpoint %} class="active item" {% else %} class="item" {% endif %}
        href="{{ url_for(endpoint, env=current_env) }}">{{ caption }}</a>
      {%- endfor %}
      <div class="right menu">
        <div class="ui item search very long dropdown selection select-environment">
          <input type="hidden" name="environment" value="{{ url_for_field('env', current_env) }}">
          <i class="dropdown icon"></i>
          <div class="default text">Select Environment</div>
          <div class="menu">
            {%- for env_name, env in envs.items() %}
            {%- if env.divider %}
            <div class="divider"></div>
            {%- endif %}
            <div class="item" data-value="{{env.url}}"><i class="{{env.icon}} icon"></i>{{ env_name }}</div>
            {%- endfor %}
          </div>
        </div>
        <div class="item">
          <button id="theme-toggle" title="Toggle dark mode">
            <i id="theme-icon" class="moon icon"></i>
          </button>
        </div>
        <div class="item"><a href="https://github.com/voxpupuli/puppetboard" target="_blank">{{ version() }}</a></div>
      </div>
    </div>
    <div class="ui grid padding-bottom">
      <div class="one wide column"></div>
      <div class="fourteen wide column">
        {% block content %} {% endblock content %}
      </div>
      <div class="one wide column"></div>
    </div>

    <div id="scroll-btn-top">
      <i class="large arrow up icon"></i>
    </div>

    <script>
      // Theme toggle handler
      (function() {
        var toggle = document.getElementById('theme-toggle');
        var icon = document.getElementById('theme-icon');

        function updateIcon(theme) {
          icon.className = theme === 'dark' ? 'sun icon' : 'moon icon';
        }

        // Set initial icon state
        updateIcon(document.documentElement.getAttribute('data-theme'));

        toggle.addEventListener('click', function() {
          var current = document.documentElement.getAttribute('data-theme');
          var newTheme = current === 'dark' ? 'light' : 'dark';
          document.documentElement.setAttribute('data-theme', newTheme);
          localStorage.setItem('theme', newTheme);
          updateIcon(newTheme);
        });
      })();
    </script>
  </body>
</html>
