<!DOCTYPE html>
<html>
<head>
  <title>Situação da Gripe</title>
  <link rel="stylesheet" href="./static/libs/bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="./static/libs/dc/dc.min.css" />
  <link rel="stylesheet" href="./static/css/custom.css" />
  <link rel="stylesheet" href="./static/css/charts.css" />
  <link rel="stylesheet" href="./static/css/tables.css" />
  <link rel="stylesheet" href="./static/libs/leaflet/leaflet.css"/>
  <link rel="stylesheet" href="./static/libs/c3/c3.min.css"/>
  <link rel="stylesheet" href="./static/libs/datatables/datatables.min.css"/>
  <link rel="stylesheet"
        href="./static/libs/datatables/ext/buttons.dataTables.min.css"/>
  <link rel="stylesheet"
        href="./static/libs/leaflet/legend/leaflet-legend.css"/>
  <link rel="icon"
        type="image/png"
        href="/static/img/info_gripe_icon.ico"
  />
  <style type="text/css">

  </style>
</head>
<body class="contingency-view">

<div class="navbar navbar-dark bg-primary" role="navigation">
  <iframe src="./super-header" class="super-header" scrolling="no"></iframe>

  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="./"><strong>Monitoramento de casos
        reportados de síndrome respiratória aguda
        grave (SRAG) hospitalizados</strong></a>
      <a href="/help"
         style="display:inline;font-weight:bold;color:white;cursor:pointer;"
      >[Ajuda]</a>
    </div>
  </div>
</div>
<div class="document container-fluid">

  <div class="row">

    <div class="col-md-12 mt-3 mb-1">
        <!-- Time Chart -->
          <div class="card p-3">
            <div class="card-block">
              <div class="criteria-box">
                <input
                    id="btn-detailed"
                    type="button" value="Detalhado (semana)"
                    class="view_name tab">
                <input
                    id="btn-resumed"
                    type="button" value="Resumido (ano)"
                    class="view_name tab">
                <input
                    id="btn-contingency"
                    type="button" value="Plano de Contingência atual"
                    class="view_name tab selected">
              </div>
              <div class="criteria-box" id="div-dataset">
                <label>Conjunto de dados:</label> <br/>
                <select name="dataset" id="dataset">
                  <option value="1" selected="selected">SRAG</option>
                  <option value="2">SRAGFLU</option>
                  <option value="3">OBITOFLU</option>
                </select>
              </div>
              <div class="criteria-box" id="div-scale">
                <label>Escala:</label> <br/>
                <select name="scale" id="scale">
                  <option value="1" selected="selected">INCIDÊNCIA</option>
                  <option value="2">CASOS</option>
                </select>
              </div>
              <div class="criteria-box">
                <input type="radio"
                       id="radTerritoryTypeState"
                       name="radTerritoryType[]"
                       checked="checked"
                       value="1"> Por UF
                <br/>
                <input type="radio"
                       id="radTerritoryTypeRegion"
                       name="radTerritoryType[]"
                       value="3"
                > Por região geopolítica
                <br/>
                <input type="radio"
                       id="radTerritoryTypeRegional"
                       name="radTerritoryType[]"
                       value="2"
                > Por padrão de circulação
              </div>
              <div class="criteria-box" id="div-year">
                <strong>Ano:</strong>
                <br/>
                <select id='year'>
                  {%for year in list_of_years:%}
                  <option value='{{year}}'
                    {{'selected="selected"' if year==last_year else ''}}
                  >{{year}}</option>
                  {%endfor%}
                </select>
              </div>
              <div id="div-week" class="criteria-box">
                <div data-role="main" class="ui-content">
                  <label for="week">Semana:</label>
                  <input type id="week-display" value="{{current_epiweek}}"
                         style="width:30px;text-align:center;padding:1px;"
                         maxlength="2"
                  />
                  <input type="range" id="week"
                         value="{{current_epiweek}}" min="1" max="52"/>
                </div>
              </div>
              <input type="hidden" id="selected-territory" value=""/>
            </div>
          </div>
        </div>
        <!-- Time Chart -->
  </div>

  <div class="row my-3">
    <!-- Map -->
    <div class="col-md-5" id="map-card">
      <div class="card bg-white">
        <h5 class="card-header" id="map-incidence-case-title">
            Mapa do Plano de Contingência
        </h5>
            <div class="container">
              <button type="button" class="btn btn-link btn-sm no-print" onclick="getscreenshot(0);">
                Salvar mapa</button>
              <button type="button" class="btn btn-link btn-sm no-print" onclick="getscreenshot(1);">
                Salvar legenda do mapa</button>
            </div>
        <div class="card-block">
          <div id="map" class="content-height"></div>
        </div>
        <p class="card-text"><small class="text-muted">*Com base nos dados disponíveis no sistema de informação
        </small></p>
      </div>
      <div id="legend">
        <strong id="map-legend-title">N&iacute;vel de ação</strong><br/>
        <svg width="120" height="90" id="map-legend">
          <rect x="10" y="15" height="10" width="10"
                class="legend-square alert-low"/>
          <text id="map-leg-low" x="20" y="20" transform="translate(8,4)">Nível Basal</text>

          <rect x="10" y="35" height="10" width="10"
                class="legend-square alert-medium"/>
          <text id="map-leg-medium" x="20" y="40" transform="translate(8,4)">Nível 0</text>

          <rect x="10" y="55" height="10" width="10"
                class="legend-square alert-high"/>
          <text id="map-leg-high" x="20" y="60" transform="translate(8,4)">Nível 1</text>

          <rect x="10" y="75" height="10" width="10"
                class="legend-square alert-very-high"/>
          <text id="map-leg-very-high" x="20" y="80" transform="translate(8,4)">Nível 2</text>
        </svg>
      </div>
    </div>
    <!-- Map -->

    <div class="col-md-7" id="incidence-card">
          <div class="card bg-white">
            <h5 class="card-header bg-light">
              <span
                  id="chart-incidence-case-title">Curva de Incidência</span>
                <span class="territory-display"></span>
            </h5>
            <div class="container">
              <button type="button" class="btn btn-link btn-sm no-print" onclick="getscreenshot(2);">
                Salvar imagem</button>
            </div>
            <div class="card-block chart-incidence">
              <!-- info panel -->
              <div id="chart-incidence-activity-level-panel">
                <p class="seasons hidden">
                  <strong class="chart-extra-text">Temporadas
                    regulares:</strong>
                  <span class="chart-extra-text"></span> <br/>
                </p>
                <p class="prob hidden">
                  <strong class="chart-extra-text">
                    Probabilidade do n&iacute;vel de atividade:
                  </strong><br/>
                  <span class="chart-extra-text">
                      Baixa: <span class="low"></span>%
                    </span> <br/>
                  <span class="chart-extra-text">
                      Epidêmica: <span class="epidemic"></span>%
                    </span> <br/>
                  <span class="chart-extra-text">
                      Alta: <span class="high"></span>%
                    </span> <br/>
                  <span class="chart-extra-text">
                      Muito Alta: <span class="very-high"></span>%
                    </span>
                </p>

                <p class="level hidden">
                  <strong class="chart-extra-text">N&iacute;vel de
                    atividade:</strong><br/>
                  <span class="chart-extra-text classification"></span> <br/>
                </p>

              </div>
              <!-- info panel:end -->

              <!-- chart -->
              <div id="weekly-incidence-curve-chart"
                   class="content-height"></div>
              <!-- chart:end -->
            </div>
            <p class="card-text"><small class="text-muted">*Com base nos dados disponíveis no sistema de informação
            </small></p>

          </div>

    </div>
    <!-- Resources Pie -->

  </div>
  <div class="row my-3">
    <!-- Table -->
    <div class="col-md-5">
      <div class="card">
        <h5 class="card-header">
            <span id="table-incidence-case-title">Incidência</span>
            <span class="period-display">na semana epidemiológica</span>
            <span class="week-display"></span>
            <span class="territory-display"></span>
        </h5>
        <div class="card-block p-2 content-height" id="divTable"
             style="overflow-y:auto;">

        </div>
        <p class="card-text"><small class="text-muted">*Com base nos dados disponíveis no sistema de informação
        </small></p>

      </div>
    </div>

    <!-- Gender/Age Distribution -->
    <div class="col-md-7">
      <div class="card bg-white" id="age-card">
        <h5 class="card-header">
          Distribui&ccedil;&atilde;o por G&ecirc;nero/Idade
            <span class="period-display">na semana epidemiológica</span>
            <span class="week-display"></span>
            <span class="territory-display"></span>
        </h5>
        <div class="container">
          <button type="button" class="btn btn-link btn-sm no-print" onclick="getscreenshot(3);">
            Salvar imagem</button>
        </div>
        <div class="card-block content-height">
          <div id="age-chart" class="content-height"></div>
        </div>
        <p class="card-text"><small class="text-muted">*Com base nos dados disponíveis no sistema de informação
        </small></p>
      </div>

    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
        <div class="card">
          <h5 class="card-header">
            Acompanhamento de oportunidades
            <span class="period-display">na semana epidemiológica</span>
            <span class="week-display"></span>
            <span class="territory-display"></span>
          </h5>
          <div class="card-body p-0" id="opportunities-chart"></div>
          <p class="card-text"><small class="text-muted">*Com base nos dados disponíveis no sistema de informação
          </small></p>
        </div>

    </div>
    <div class="col-md-6">
        <div class="card">
          <h5 class="card-header">
            Exames laboratoriais
            <span class="period-display">na semana epidemiológica</span>
            <span class="week-display"></span>
            <span class="territory-display"></span>
          </h5>

          <div class="card-body" id="etiological-chart"></div>
          <p class="card-text"><small class="text-muted">*Com base nos dados disponíveis no sistema de informação
          </small></p>
        </div>

      </div>
    </div>

</div>

<script src="./static/libs/jquery/jquery.js"></script>
<script src="./static/libs/bootstrap/bootstrap.min.js"></script>
<script src="./static/libs/popper/popper.min.js"></script>
<script src="./static/libs/crossfilter/crossfilter.min.js"></script>
<script src="./static/libs/d3/d3.min.js"></script>
<script src="./static/libs/dc/dc.min.js"></script>
<script src="./static/libs/queue/queue.js"></script>
<script src="./static/libs/leaflet/leaflet.js"></script>
<script src="./static/libs/leaflet/legend/leaflet-legend.js"></script>
<script src="./static/libs/c3/c3.min.js"></script>
<script src="./static/libs/datatables/datatables.min.js"></script>
<script src="./static/libs/datatables/ext/jquery.dataTables.min.js"></script>
<script src="./static/libs/datatables/ext/dataTables.buttons.min.js"></script>
<script src="./static/libs/datatables/ext/jszip.min.js"></script>
<script src="./static/libs/datatables/ext/vfs_fonts.js"></script>
<script src="./static/libs/datatables/ext/buttons.html5.min.js"></script>
<script src="./static/libs/plotlyjs/plotly-latest.min.js"></script>
<script src="./static/libs/svg-crowbar-2/singledownload-svg-crowbar-2.js"></script>
<script src="./static/js/flu_table.js"></script>
<script src="./static/js/flu_map.js"></script>
<script src="./static/js/flu_chart.js"></script>
<script src="./static/js/dashboard.js"></script>
<script language="JavaScript" type="text/javascript">
  function getscreenshot(myplot) {
    var plotName = ['mapa', 'mapa-legenda', 'serie-temporal', 'distribuicao-etaria'];
    var myplotObj = {SVGid: myplot, SVGname: plotName[myplot]};

    singleSVGcrowbar(myplotObj);
  }

</script>
<script language="JavaScript">
    $(document).ready(function(){
      dashboard = new Dashboard({{last_week_years}});
      dashboard.init();
    });
</script>
</body>
</html>
