{% extends "base.html" %}
{% block title %}{{ code }} · {{ t('design.bi_page_title') }}{% endblock %}

{% block header %}
<div class="page-pretitle">{{ t('design.title') }}</div>
<h2 class="page-title">
  <code>{{ code }}</code> · {{ report.report_name }} · {{ t('design.bi_page_title') }}
</h2>
{% endblock %}

{% block header_actions %}
<div class="btn-list">
  <a href="/reports/{{ code }}" class="btn btn-outline-secondary">
    <i class="ti ti-file-analytics me-1"></i>{{ t('design.open_report') }}
  </a>
  <a href="/design" class="btn btn-outline-secondary">
    <i class="ti ti-arrow-left me-1"></i>{{ t('design.back_to_list') }}
  </a>
</div>
{% endblock %}

{% block content %}
{% if msg %}
{% set refused = msg.startswith(('link_', 'params_')) and msg != 'params_saved'
   or msg in ('bi_unavailable', 'dataset_needs_params', 'dataset_failed') %}
<div class="alert {{ 'alert-warning' if refused else 'alert-success' }} alert-dismissible mb-3" role="alert">
  <div class="d-flex">
    <div><i class="ti {{ 'ti-alert-triangle' if refused else 'ti-check' }} me-2"></i></div>
    <div>{{ t('design.msg_' ~ msg) }}{% if msg_detail %} <code>{{ msg_detail }}</code>{% endif %}</div>
  </div>
</div>
{% endif %}

{% if sync_outcome %}
<div class="alert alert-info alert-dismissible mb-3" role="alert">
  <div class="d-flex">
    <div><i class="ti ti-info-circle me-2"></i></div>
    <div>{{ sync_outcome }}</div>
  </div>
</div>
{% endif %}

{% if superset_error %}
<div class="alert alert-danger mb-3" role="alert">
  <div class="d-flex">
    <div><i class="ti ti-alert-triangle me-2"></i></div>
    <div>{{ superset_error }}</div>
  </div>
</div>
{% endif %}

{% if not self_service_on %}
<div class="alert alert-warning mb-3" role="alert">
  <div class="d-flex">
    <div><i class="ti ti-alert-circle me-2"></i></div>
    <div>{{ t('design.self_service_disabled') }}</div>
  </div>
</div>
{% else %}
{% set catalog = bi_info.catalog if bi_info and bi_info.catalog else None %}

{#- Dashboards, charts and datasets: only those on data the user may design (an administrator: all),
    and of these the user's own unless "All" is chosen. -#}
<div class="d-flex flex-wrap align-items-center gap-2 mb-3" id="superset-filter">
  <span class="text-secondary">{{ t('design.superset_show') }}</span>
  <div class="btn-group" role="group">
    <a href="?all=0" class="btn btn-sm {{ 'btn-outline-primary' if show_all else 'btn-primary' }}"{% if not show_all %} aria-current="true"{% endif %}>
      <i class="ti ti-user me-1"></i>{{ t('design.superset_mine') }}</a>
    <a href="?all=1" class="btn btn-sm {{ 'btn-primary' if show_all else 'btn-outline-primary' }}"{% if show_all %} aria-current="true"{% endif %}>
      <i class="ti ti-list me-1"></i>{{ t('design.superset_all') }}</a>
  </div>
  <span class="small text-secondary">{{ t('design.superset_scope_admin') if auth.is_admin else t('design.superset_scope') }}</span>
  {% if catalog and catalog.me is not none %}
  <span class="small text-secondary ms-auto"><i class="ti ti-user-check me-1"></i>{{ t('design.superset_account', account=catalog.account) }}</span>
  {% endif %}
</div>
{% if catalog and not catalog.error and catalog.me is none %}
<div class="alert alert-info mb-3" role="alert">{{ t('design.superset_no_account', username=catalog.account) }}</div>
{% endif %}

<div class="row row-cards">
  <div class="col-12">
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title">{{ t('design.dataset_table') }}</h3>
        {% if can_publish and bi_dataset_ready %}
        <form method="post" action="/design/reports/{{ code }}/bi/sync" class="m-0">
          <input type="hidden" name="csrf_token" value="{{ auth.csrf_token }}">
          <button type="submit" class="btn btn-sm btn-outline-secondary">
            <i class="ti ti-refresh me-1"></i>{{ t('design.sync_now') }}
          </button>
        </form>
        {% endif %}
      </div>
      <div class="card-body">
        <div class="datagrid">
          <div class="datagrid-item">
            <div class="datagrid-title">{{ t('design.dataset_table') }}</div>
            <div class="datagrid-content">
              {% if report.bi_dataset_table %}
              <code>{{ report.bi_dataset_table }}</code>
              {% else %}
              —
              {% endif %}
            </div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">{{ t('design.dashboard_status') }}</div>
            <div class="datagrid-content">
              {% if bi_dataset_ready and bi_info and bi_info.dataset_id %}
              <span class="badge bg-success-lt me-2">{{ t('design.dataset_ready') }}</span>
              <a href="{{ bi_info.explore_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary">
                <i class="ti ti-external-link me-1"></i>{{ t('design.open_in_superset') }}
              </a>
              {% else %}
              <span class="text-secondary">{{ t('design.dataset_not_made') if report.bi_dataset_table else t('design.dataset_no_table') }}</span>
              {% if can_publish %}
              <form method="post" action="/design/reports/{{ code }}/bi/dataset" class="d-inline m-0">
                <input type="hidden" name="csrf_token" value="{{ auth.csrf_token }}">
                <button type="submit" class="btn btn-sm btn-primary ms-2">
                  <i class="ti ti-database-plus me-1"></i>{{ t('design.make_dataset') }}
                </button>
              </form>
              {% elif not report.bi_dataset_table %}
              <div class="small text-secondary">{{ t('design.dataset_no_table_ask') }}</div>
              {% endif %}
              {% if report.bi_dataset_table %}
              <a href="/reports/{{ code }}" class="btn btn-sm btn-outline-secondary ms-2">
                <i class="ti ti-player-play me-1"></i>{{ t('design.run_report_once') }}
              </a>
              {% endif %}
              {% endif %}
            </div>
          </div>
          <div class="datagrid-item">
            <div class="datagrid-title">{{ t('design.required_role') }}</div>
            <div class="datagrid-content">
              {% if bi_info and bi_info.role %}
              <code>{{ bi_info.role }}</code>
              {% else %}
              —
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-12">
    <div class="card mb-3">
      <div class="card-header">
        <h3 class="card-title">{{ t('design.dashboard_title') }}</h3>
      </div>
      <div class="card-body">
        <div class="datagrid mb-3">
          <div class="datagrid-item">
            <div class="datagrid-title">{{ t('design.dashboard_status') }}</div>
            <div class="datagrid-content">
              {% if bi_info and bi_info.linked_uuid %}
              <div class="d-flex align-items-center gap-2">
                <code>{{ bi_info.linked_uuid }}</code>
                <a href="/design/reports/{{ code }}/superset/dashboard" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-secondary">
                  <i class="ti ti-external-link me-1"></i>{{ t('design.open_in_superset') }}
                </a>
                {% if can_publish %}
                <form method="post" action="/design/reports/{{ code }}/bi/unlink" class="m-0">
                  <input type="hidden" name="csrf_token" value="{{ auth.csrf_token }}">
                  <button type="submit" class="btn btn-sm btn-outline-danger">
                    <i class="ti ti-trash me-1"></i>{{ t('design.remove_dashboard') }}
                  </button>
                </form>
                {% endif %}
              </div>
              {% else %}
              <span class="text-secondary">{{ t('design.no_dashboard_linked') }}</span>
              {% endif %}
            </div>
          </div>
        </div>

        {% set dashboards = bi_info.dashboards if bi_info else [] %}
        {% set shown = dashboards if show_all else dashboards | selectattr('mine', 'ne', false) | list %}
        {% if shown %}
        <div class="table-responsive">
          <table class="table table-vcenter card-table table-striped table-sm">
            <thead>
              <tr>
                <th>{{ t('design.dashboard_title') }}</th>
                <th>{{ t('design.dashboard_status') }}</th>
                <th class="w-1">{{ t('design.actions') }}</th>
              </tr>
            </thead>
            <tbody>
              {% for d in shown %}
              <tr>
                <td>
                  <a href="{{ d.url }}" target="_blank" rel="noopener noreferrer">
                    <strong>{{ d.title }}</strong>
                    <i class="ti ti-external-link ms-1 small"></i>
                  </a>
                  {% if show_all and d.mine %}<span class="badge bg-blue-lt ms-1">{{ t('design.superset_mine_badge') }}</span>{% endif %}
                </td>
                <td>
                  {% if d.usable %}
                  <span class="badge bg-success-lt">{{ t('design.dashboard_usable') }}</span>
                  {% if d.members %}
                  <small class="text-secondary ms-2">{{ t('design.dashboard_also_reads') }}
                    {% for m in d.members %}<code>{{ m }}</code>{% if not loop.last %}, {% endif %}{% endfor %}</small>
                  {% endif %}
                  {% else %}
                  <span class="badge bg-danger-lt">{{ t('design.dashboard_unusable') }}</span>
                  <small class="text-secondary ms-2">{{ d.reason }}</small>
                  {% endif %}
                </td>
                <td>
                  {% if d.usable and can_publish %}
                  <form method="post" action="/design/reports/{{ code }}/bi/link" class="m-0">
                    <input type="hidden" name="csrf_token" value="{{ auth.csrf_token }}">
                    <input type="hidden" name="dashboard_id" value="{{ d.id }}">
                    <button type="submit" class="btn btn-sm btn-primary">
                      <i class="ti ti-link me-1"></i>{{ t('design.use_for_report') }}
                    </button>
                  </form>
                  {% else %}
                  —
                  {% endif %}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <div class="text-secondary py-2">
          {{ t('design.no_dashboards_found') }}
        </div>
        {% endif %}
        {% if dashboards | length > shown | length %}
        <div class="small text-secondary mt-2">{{ t('design.superset_hidden', n=dashboards | length - shown | length) }}</div>
        {% endif %}
      </div>
    </div>
  </div>

  {% if catalog %}
  {#- What the designer may build on in Superset: the datasets of the reports they may design and
      the charts on them. -#}
  <div class="col-12">
    <div class="card mb-3" id="superset-catalog">
      <div class="card-header">
        <h3 class="card-title">{{ t('design.catalog_title') }}</h3>
      </div>
      <div class="card-body">
        {% if catalog.error %}
        <div class="alert alert-warning mb-0" role="alert">
          {{ t('design.catalog_error') }} {{ catalog.error }}{% if auth.is_admin and catalog.error_detail %}: <code>{{ catalog.error_detail }}</code>{% endif %}
        </div>
        {% else %}
        {% set datasets = catalog.datasets if show_all else catalog.datasets | selectattr('mine') | list %}
        {% set charts = catalog.charts if show_all else catalog.charts | selectattr('mine') | list %}
        <div class="row g-4">
          <div class="col-xl-5">
            <h4 class="mb-2">{{ t('design.catalog_datasets') }}</h4>
            {% if datasets %}
            <div class="table-responsive">
              <table class="table table-vcenter table-striped table-sm mb-0">
                <thead>
                  <tr>
                    <th>{{ t('design.catalog_report') }}</th>
                    <th>{{ t('design.dataset_table') }}</th>
                    <th class="w-1"></th>
                  </tr>
                </thead>
                <tbody>
                  {% for d in datasets %}
                  <tr data-catalog-dataset="{{ d.id }}">
                    <td>
                      <code>{{ d.report }}</code> {{ d.name }}
                      {% if d.this %}<span class="badge bg-green-lt ms-1">{{ t('design.catalog_this_report') }}</span>{% endif %}
                      {% if show_all and d.mine %}<span class="badge bg-blue-lt ms-1">{{ t('design.superset_mine_badge') }}</span>{% endif %}
                    </td>
                    <td><code>{{ d.table }}</code></td>
                    <td>
                      <a href="/design/reports/{{ d.report }}/superset" target="_blank" rel="noopener noreferrer"
                         class="btn btn-sm btn-outline-secondary text-nowrap">
                        <i class="ti ti-external-link me-1"></i>{{ t('design.open_in_superset') }}
                      </a>
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            {% else %}
            <div class="text-secondary">{{ t('design.catalog_no_datasets') }}</div>
            {% endif %}
            {% if catalog.datasets | length > datasets | length %}
            <div class="small text-secondary mt-2">{{ t('design.superset_hidden', n=catalog.datasets | length - datasets | length) }}</div>
            {% endif %}
          </div>
          <div class="col-xl-7">
            <h4 class="mb-2">{{ t('design.catalog_charts') }}</h4>
            {% if charts %}
            <div class="table-responsive">
              <table class="table table-vcenter table-striped table-sm mb-0">
                <thead>
                  <tr>
                    <th>{{ t('design.catalog_chart') }}</th>
                    <th>{{ t('design.catalog_chart_type') }}</th>
                    <th>{{ t('design.catalog_dataset') }}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for c in charts %}
                  <tr data-catalog-chart="{{ c.id }}">
                    <td>
                      <a href="{{ c.url }}" target="_blank" rel="noopener noreferrer">{{ c.title }}<i class="ti ti-external-link ms-1 small"></i></a>
                      {% if show_all and c.mine %}<span class="badge bg-blue-lt ms-1">{{ t('design.superset_mine_badge') }}</span>{% endif %}
                    </td>
                    <td class="text-secondary">{{ c.viz_type or '' }}</td>
                    <td>
                      {% if c.report %}<code>{{ c.report }}</code>{% else %}<span class="text-secondary">{{ c.dataset or '—' }}</span>{% endif %}
                      {% if c.this %}<span class="badge bg-green-lt ms-1">{{ t('design.catalog_this_report') }}</span>{% endif %}
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
            {% else %}
            <div class="text-secondary">{{ t('design.catalog_no_charts') }}</div>
            {% endif %}
            {% if catalog.charts | length > charts | length %}
            <div class="small text-secondary mt-2">{{ t('design.superset_hidden', n=catalog.charts | length - charts | length) }}</div>
            {% endif %}
          </div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endif %}

  {% if dashboard_form %}
  {#- The dashboard reads the datasets of other reports too. Their parameters are dragged onto
      the report's form (or added with +): one with the same name, label and type as an input
      already there shares it; a parameter left out runs with its default value. -#}
  {% macro param_text(p) -%}
  <span class="fw-medium">{{ p.label }}</span> <code class="ms-1">{{ p.name }}</code>
  <span class="badge bg-secondary-lt ms-1">{{ p.data_type }}{% if p.multi %} []{% endif %}</span>
  {%- endmacro %}
  <div class="col-12">
    <div class="card mb-3">
      <div class="card-header">
        <h3 class="card-title">{{ t('design.dashboard_params_title') }}</h3>
      </div>
      <div class="card-body">
        <p class="text-secondary">{{ t('design.dashboard_params_help') }}</p>
        {% if dashboard_form.missing %}
        <div class="alert alert-warning" role="alert">
          {{ t('design.dashboard_params_missing') }}
          {% for p in dashboard_form.missing %}<code>{{ p.pick }}</code>{% if not loop.last %}, {% endif %}{% endfor %}
        </div>
        {% endif %}
        <form method="post" action="/design/reports/{{ code }}/bi/params" id="dashboard-params"
              data-text-shared-own="{{ t('design.dashboard_params_shared_own') }}"
              data-text-shared-above="{{ t('design.dashboard_params_shared_above') }}">
          <input type="hidden" name="csrf_token" value="{{ auth.csrf_token }}">
          <div class="row g-4">
            <div class="col-lg-6">
              <h4 class="mb-2">{{ t('design.dashboard_params_available') }}</h4>
              {% for m in dashboard_form.members %}
              <div class="mb-3">
                <div class="text-secondary small mb-1"><code>{{ m.code }}</code> · {{ m.name }}</div>
                <div class="list-group">
                  {% for p in m.params %}
                  <div class="list-group-item d-flex align-items-center gap-2 drs-chip" draggable="true"
                       data-pick="{{ p.pick }}" data-key="{{ p.key }}" data-member="{{ m.code }}" data-member-name="{{ m.name }}">
                    <i class="ti ti-grip-vertical text-secondary"></i>
                    <div class="flex-fill">
                      <div data-text>{{ param_text(p) }}</div>
                      <div class="small text-secondary">
                        {% if p.without_default %}<span class="text-danger">{{ t('design.dashboard_params_required') }}</span>
                        {% elif p.default %}{{ t('design.dashboard_params_default') }}: <code>{{ p.default }}</code>
                        {% else %}{{ t('design.dashboard_params_no_default') }}{% endif %}
                      </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-icon btn-ghost-primary" data-add
                            title="{{ t('design.dashboard_params_add') }}" aria-label="{{ t('design.dashboard_params_add') }}">
                      <i class="ti ti-plus"></i></button>
                  </div>
                  {% endfor %}
                </div>
              </div>
              {% endfor %}
            </div>
            <div class="col-lg-6">
              <h4 class="mb-2">{{ t('design.dashboard_params_on_form') }}</h4>
              <div class="list-group mb-2">
                {% for o in dashboard_form.own %}
                <div class="list-group-item d-flex align-items-center gap-2" data-own-key="{{ o.key }}">
                  <i class="ti ti-lock text-secondary"></i>
                  <div class="flex-fill"><span class="fw-medium">{{ o.label }}</span> <code class="ms-1">{{ o.name }}</code></div>
                  <span class="badge bg-blue-lt">{{ t('design.dashboard_params_own') }}</span>
                </div>
                {% endfor %}
              </div>
              {% macro picked_item(pick, key, member, member_name, text) -%}
              <div class="list-group-item d-flex align-items-center gap-2" draggable="true" data-pick="{{ pick }}" data-key="{{ key }}">
                <i class="ti ti-grip-vertical text-secondary"></i>
                <input type="hidden" name="pick" value="{{ pick }}">
                <div class="flex-fill">
                  <div data-text>{{ text }}</div>
                  <div class="small text-secondary"><code data-member>{{ member }}</code> · <span data-member-name>{{ member_name }}</span>
                    <span class="badge bg-green-lt ms-1 d-none" data-shared></span></div>
                </div>
                <button type="button" class="btn btn-sm btn-icon btn-ghost-secondary" data-move="-1"
                        title="{{ t('design.dashboard_params_up') }}" aria-label="{{ t('design.dashboard_params_up') }}"><i class="ti ti-arrow-up"></i></button>
                <button type="button" class="btn btn-sm btn-icon btn-ghost-secondary" data-move="1"
                        title="{{ t('design.dashboard_params_down') }}" aria-label="{{ t('design.dashboard_params_down') }}"><i class="ti ti-arrow-down"></i></button>
                <button type="button" class="btn btn-sm btn-icon btn-ghost-danger" data-remove
                        title="{{ t('design.dashboard_params_remove') }}" aria-label="{{ t('design.dashboard_params_remove') }}"><i class="ti ti-x"></i></button>
              </div>
              {%- endmacro %}
              <div class="list-group drs-drop" id="picked">
                {% for p in dashboard_form.picked %}{{ picked_item(p.pick, p.key, p.member, p.member_name, param_text(p)) }}{% endfor %}
                <div class="list-group-item text-secondary text-center drs-drop-hint">{{ t('design.dashboard_params_drop') }}</div>
              </div>
              <template id="picked-item">{{ picked_item('', '', '', '', '') }}</template>
              {% if can_publish %}
              <button type="submit" class="btn btn-primary mt-2">
                <i class="ti ti-device-floppy me-1"></i>{{ t('design.dashboard_params_save') }}
              </button>
              {% endif %}
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endif %}
{% endblock %}
{% block scripts %}
{% if dashboard_form %}<script src="{{ static('js/bi_params.js') }}"></script>{% endif %}
{% endblock %}