{% extends "base.html" %}

{% set dashboard = dashboards[slug] %}

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

{% block extra_head %}
{{ super() }}
<link href="{{ urls.static_plugins('datasette_dashboards', 'dashboards.css') }}" rel="stylesheet"/>
<style>
  @media (min-width: 640px) {
    .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 in dashboard.charts %}
    #card-{{ loop.index }} {
      grid-area: chart{{ loop.index }};
    }
    {% endfor %}
    {% endif %}
  }
</style>
{% endblock %}

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

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

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

    <div class="dashboard-grid">
      {% for chart in dashboard.charts %}
      <div id="card-{{ loop.index }}" class="dashboard-card">
        {% if chart.library != 'markdown' %}
        <div class="dashboard-card-title">
          <p><a href="/{{ chart.db }}?sql={{ chart.query }}">{{ chart.title }}</a></p>
        </div>
        {% endif %}

        <div id="chart-{{ loop.index }}" class="dashboard-card-chart">
          {% if chart.library == 'markdown' %}
          {{ render_markdown(chart.display) }}
          {% endif %}
        </div>
      </div>
      {% endfor %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.17.0"></script>
    <script src="{{ urls.static_plugins('datasette_dashboards', 'dashboards.js') }}"></script>
    <script type="text/javascript">
      {% for chart in dashboard.charts %}
      {% if chart.library == 'vega' %}
      renderVegaChart(
        JSON.parse('{{ chart|tojson }}'),
        '/{{ chart.db }}.json?sql={{ chart.query }}&_shape=array',
        '#chart-{{ loop.index }}'
      )
      {% endif %}
      {% endfor %}
    </script>
{% endblock %}