<!DOCTYPE html> 

<html class="sr js anime-ready" style lang=en>
  <head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width, initial-scale=1">

    <title>Alpha</title>

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

    <link rel="stylesheet" href="/assets/css/logs.css?{{date}}">

    <link rel="icon" type="image/png" href="/assets/images/icons/alpha.png" />
    
    <script src="/assets/js/libs/jquery.min.js"></script>
    <script src="/assets/js/libs/ansi_up.js" type="text/javascript"></script>
    
  </head>

  <body>
    <div style="flex-direction: row;">
        <div class="filters">
            <div>
                <label for="search">Research:</label>

                <input type="text" id="search" name="trip-start" value ="">
            </div>
            <div>
                <label for="start">Start date:</label>

                <input type="datetime-local" id="start-date" name="trip-start" value="" onchange="dateChange()">
            </div>
            <div>
                <label for="end">End date:</label>

                <input type="datetime-local" id="end-date" name="trip-end" value="" onchange="dateChange()">
            </div>
        </div>

        <div class="filters">
            <div><label class="switch">
                <input type="checkbox" onclick="onClickHandler('debug')" id="debug" checked>
                <span class="slider round"></span>
              </label>
              <span class="ttl">Debug</span>
            </div>
            <div><label class="switch">
                <input type="checkbox" onclick="onClickHandler('info')" id="info" checked>
                <span class="slider round"></span>
              </label>
              <span class="ttl">Info</span>
            </div>
            <div><label class="switch">
                <input type="checkbox" onclick="onClickHandler('warning')" id="warning" checked>
                <span class="slider round"></span>
              </label>
              <span class="ttl">Warning</span>
            </div>
            <div><label class="switch">
                <input type="checkbox" onclick="onClickHandler('error')" id="error" checked>
                <span class="slider round"></span>
              </label>
              <span class="ttl">Error</span>
            </div>
            <div><label class="switch">
                <input type="checkbox" onclick="onClickHandler('critical')" id="critical" checked>
                <span class="slider round"></span>
              </label>
              <span class="ttl">Critical</span>
            </div>
        </div>

        {% for name, cf in logs_files.items() %}
        <div style="margin-top:10px; width:80%;margin-left: auto;margin-right: auto;">
            <button type="button" class="collapsible" onclick="getLogFileContent('{{name}}','{{cf.name}}','{{cf.node}}',true, false)">
                {% if cf.up_to_date %} 
                    <div class="log_name">{{cf.name}} - {{cf.node}}</div>
                {% else %}
                    <div>{{cf.name}} - {{cf.node}}</div>
                {% endif %}
                <div><span class="size">{{cf.size_s}}</span> - {{cf['modification_date']}}</div>
            </button>
            
            <div class="content {{cf.name}} {{cf.node}}" id="{{name}}">
                <p></p>
            </div>
        </div>

        {% endfor %}
    </div>

    <div id="loading"></div>
  </body>

  <script src="/assets/js/logs.js?{{date}}" type="text/javascript"></script>

</html>