{% extends "base.html" %}

{% block title %}{{ dashboard.title }}{% endblock %}

{% block extra_head %}
{{ super() }}
<link href="{{ datasette_leaflet_css_url }}" rel="stylesheet">
<link href="{{ urls.static_plugins('datasette_dashboards', 'dashboards.css') }}" rel="stylesheet"/>
<style>
  {% if embed %}
  header {
    display: none;
  }

  footer {
    display: none;
  }
  {% endif %}

  @media (min-width: 800px) {
    .dashboard-grid {
      {% if dashboard.layout %}
      grid-template-areas: {% for row in dashboard.layout %}"{% for col in row %}{{ col }} {% endfor %}" {% endfor %};
      {% else %}
      grid-template-columns: repeat(2, 1fr);
      {% endif %}
    }

    {% if dashboard.layout %}
    {% for chart_slug, chart in dashboard.charts.items() %}
    #card-{{ chart_slug }} {
      grid-area: {{ chart_slug }};
    }
    {% endfor %}
    {% endif %}
  }
</style>
{% endblock %}

{% block crumbs %}
    {% if not embed %}
    <p class="crumbs">
        <a href="{{ urls.instance() }}">home</a> /
        <a href="{{ urls.path('-/dashboards') }}">dashboards</a>
    </p>
    {% endif %}
{% endblock %}

{% block body_class %}index{% endblock %}

{% block content %}
  <div class="dashboard-container">
    <div class="dashboard-header">
      <div>
        <div class="page-header" style="border-color: black">
          <h1>{{ dashboard.title }}</h1>
        </div>
        <p>{{ dashboard.description }}</p>
      </div>

      <div class="dashboard-toolbar">
        {% if settings.allow_fullscreen %}
        <form>
          <button type="button" onclick="toggleFullscreen()">Fullscreen</button>
        </form>
        {% endif %}
      </div>
    </div>

    {% if dashboard.filters %}
    <div class="dashboard-filters">
      <form method="GET" action="{{ urls.path('-/dashboards') }}/{{ slug }}">
        <div class="dashboard-filters-boxes">
          {% for key, dfilter in dashboard.filters.items() %}
          {% set dfilter_type = dfilter.type if dfilter.type in ['text', 'date', 'number', 'select'] else 'text' %}
          <fieldset>
            <legend>{{ dfilter.name }}</legend>
            {% if dfilter_type == 'select' %}
              {% if dfilter.options | length > 100 %}
              <input id="{{ key }}" name="{{ key }}" type="text" list="{{ key }}-list" value="{% if key in query_parameters.keys() %}{{ query_parameters[key] }}{% else %}{{ dfilter.default }}{% endif %}">
              <datalist id="{{ key }}-list">
                {% for option in dfilter.options %}
                <option value="{{ option }}">{{ option }}</option>
                {% endfor %}
              </datalist>
              {% else %}
              <select id="{{ key }}" name="{{ key }}">
                <option value="" {% if (key in query_parameters.keys() and query_parameters[key] == '') or  (key not in query_parameters.keys() and not dfilter.default) %}selected{% endif %}></option>
                {% for option in dfilter.options %}
                <option value="{{ option }}" {% if (key in query_parameters.keys() and query_parameters[key] == option) or (key not in query_parameters.keys() and dfilter.default == option) %}selected{% endif %}>{{ option }}</option>
                {% endfor %}
              </select>
              {% endif %}
            {% else %}
            <input id="{{ key }}" name="{{ key }}" type="{{ dfilter_type }}"{% if dfilter.min is defined %} min="{{ dfilter.min }}"{% endif %}{% if dfilter.max is defined %} max="{{ dfilter.max }}"{% endif %}{% if dfilter.step is defined %} step="{{ dfilter.step }}"{% endif %} value="{% if key in query_parameters.keys() %}{{ query_parameters[key] }}{% else %}{{ dfilter.default }}{% endif %}">
            {% endif %}
          </fieldset>
          {% endfor %}
        </div>
        <input type="submit" value="Apply">
      </form>
    </div>
    {% endif %}

    <div class="dashboard-grid">
      {% for chart_slug, chart in dashboard.charts.items() %}
      <div id="card-{{ chart_slug }}" class="dashboard-card">
        {% if chart.library != 'markdown' %}
        <div class="dashboard-card-title">
          <p>
            {% if not embed %}
            <a href="{{ urls.path('-/dashboards') }}/{{ slug }}/{{ chart_slug }}{% if query_string|length > 0 %}?{{ query_string|safe }}{% endif %}">
            {% endif%}
            {{ chart.title }}
            {% if not embed %}
            </a>
            {% endif%}
            <span id="chart-tooltip-{{ chart_slug}}" class="chart-tooltip" title="SQL query returning more than {{ row_limit }} rows">
              ⚠️
            </span>
          </p>
        </div>
        {% endif %}

        <div id="chart-{{ chart_slug }}" class="dashboard-card-chart">
          {% if chart.library == 'markdown' %}
          {{ render_markdown(
               chart.display,
               extensions=["extra"],
               extra_tags=["table", "thead", "tr", "th", "td", "tbody"]
             )
          }}
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <script src="{{ datasette_leaflet_url }}" type="module"></script>
  <script src="{{ urls.static_plugins('datasette_dashboards', 'vega.min.js') }}"></script>
  <script src="{{ urls.static_plugins('datasette_dashboards', 'vega-lite.min.js') }}"></script>
  <script src="{{ urls.static_plugins('datasette_dashboards', 'vega-embed.min.js') }}"></script>
  <script src="{{ urls.static_plugins('datasette_dashboards', 'dashboards.js') }}"></script>
  <script type="text/javascript">
    {% for chart_slug, chart in dashboard.charts.items() %}
    renderChart('{{ chart_slug }}', {{ chart|tojson }}, '{{ query_string|safe }}', '{{ absolute_url }}')
    {% endfor %}

    {% if settings.autorefresh %}
    autorefresh({{ settings.autorefresh }})
    {% endif %}
  </script>
{% endblock %}
