{% extends "base.html" %}

{% block title %}{{ chart.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 %}
</style>
{% endblock %}

{% block crumbs %}
    {% if not embed %}
    <p class="crumbs">
        <a href="{{ urls.instance() }}">home</a> /
        <a href="{{ urls.path('-/dashboards') }}">dashboards</a> /
        <a href="{{ urls.path('-/dashboards') }}/{{ slug }}">{{ dashboard.title }}</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>
          {% if chart.title %}
          {{ chart.title }}
          {% endif %}
          <span id="chart-tooltip-{{ slug }}" class="chart-tooltip" title="SQL query returning more than {{ row_limit }} rows">
            ⚠️
          </span>
        </p>
      </div>
    </div>

    {% if chart.db and chart.query and not embed %}
    <p>
      <a class="not-underlined" title="{{ chart.query }}" href="{{ urls.database(chart.db) }}?{{ {'sql': chart.query}|urlencode|safe }}{% if query_string|length > 0 %}&{{ query_string|safe }}{% endif %}">
        &#x270e; <span class="underlined">View and edit SQL</span>
      </a>
    </p>
    {% endif %}

    <div class="dashboard-card">
      <div id="chart-{{ slug }}" class="chart-container">
        {% if chart.library == 'markdown' %}
        {{ render_markdown(
              chart.display,
              extensions=["extra"],
              extra_tags=["table", "thead", "tr", "th", "td", "tbody"]
            )
        }}
        {% endif %}
      </div>
    </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">
    renderChart('{{ slug }}', {{ chart|tojson }}, '{{ query_string|safe }}', '{{ absolute_url }}', true)
  </script>
{% endblock %}