{{define "theme-daynight/service"}}

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{.Title}}</title>
    <link rel="shortcut icon" type="image/png" href="/static/logo.png" />
    <link rel="stylesheet" href="/static/theme-daynight/css/service.css?v202102012266" />

    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    {{if ts .CustomCode}}
    {{.CustomCode|safe}}
    {{end}}
  </head>

  <body data-theme="light" data-gridlist="list">
    <article>
      <header>
        <section class="nav-bar clearfix">
            <figure class="logo"><a href="/">{{.Conf.Site.Brand}}</a></figure>
            <div class="icon-container">
              <div class="row cf">
                <div class="three col">
                  <div class="hamburger" id="hamburger-icon"><span class="line"></span><span class="line"></span><span class="line"></span></div>
                </div>
              </div>
            </div>
            <nav class="nav-menu">
              <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/service">服务状态</a></li>
                {{if .Admin}}
                <li><a href="/server">管理后台</a></li>
                {{else}}
                <li><a href="/login">登录</a></li>
                {{end}}
              </ul>
            </nav>
        </section>
      </header>

      <main>
        <section class="monitor-header">
          <h2>服务状态</h2>
          <h4>最近30天在线率</h4>
        </section>
        <section class="monitor-container">
          {{range $service := .Services}}
          <section class="monitor-info-container">
            <div class="monitor-state">
              <span class="monitor-state-dot {{className (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}"></span>
              <span class="monitor-state-text">{{statusName (divU64 $service.CurrentUp (addU64 $service.CurrentUp $service.CurrentDown))}}</span>
            </div>
            <div class="monitor-name">{{$service.Monitor.Name}}</div>
            <div class="monitor-uptime">{{float32f (divU64 $service.TotalUp (addU64 $service.TotalUp $service.TotalDown))}}%</div>

            <div class="corner-container">
              {{range $i,$d := $service.Delay}}
              <div class="corner {{className (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}" aria-expanded="false">
                <ul class="sub-content">
                  <li>{{dayBefore $i}}</li>
                  <li>{{float32f (div (index $service.Up $i) (add (index $service.Up $i) (index $service.Down $i)))}}%</li>
                  <li>{{float32f $d}}ms</li>
                </ul>
              </div>
              {{end}}
            </div>
          </section>
          {{end}}
        </section>
      </main>
      
      <div class="sidebar-container">
        <ul>
          <li><i class="fas fa-sun" title="白昼模式"></i><span>白昼模式</span></li>
          <li><i class="fas fa-moon" title="暗黑模式"></i><span>暗黑模式</span></li>
          <li><i class="fas fa-th" title="网格视图"></i><span>网格视图</span></li>
          <li><i class="fas fa-list-ul" title="列表视图"></i><span>列表视图</span></li>
        </ul>
      </div>

      <section class="service-mobile-toggle">
        <ul>
          <li><i class="fas fa-plus"></i></li>
          <li>
            <label class="switcher">
              <input type="checkbox" name="service-theme" id="dark-light" />
              <div>
                <i class="fas fa-adjust"></i>
              </div>
            </label>
          </li>
          <li>
            <label class="switcher">
              <input type="checkbox" name="service-grid" id="grid-list" checked/>
              <div>
                <i class="fas fa-grip-horizontal"></i>
              </div>
            </label>
          </li>
        </ul>
      </section>

      <footer>
        <div class="footer-container">
          <div>
            <a href="https://github.com/naiba/nezha" target="_blank">Powered by 哪吒监控 · {{.Version}}</a>
            <p>
              &copy;
              <span id="copyright-date"
                ><script>
                  document.getElementById("copyright-date").appendChild(document.createTextNode(new Date().getFullYear()));
                </script></span
              >
              · <a href="https://blog.jackiesung.com" target="_blank">Theme designed by Jackie Sung</a>
            </p>
          </div>
        </div>
      </footer>
      
      <!-- Back to top button -->
      <a id="back-to-top"></a>
    </article>

    <script src="/static/theme-daynight/js/service.js?v202102012266"></script>

  </body>
</html>
{{end}}
