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

{% block header %}
<h2 class="page-title">{{ t('design.title') }}</h2>
{% endblock %}

{% block header_actions %}
<a href="/design/new" class="btn btn-primary">
  <i class="ti ti-plus me-1"></i>{{ t('design.new_report') }}
</a>
{% endblock %}

{% block content %}
{% if msg %}
<div class="alert alert-success alert-dismissible mb-3" role="alert">
  <div class="d-flex">
    <div><i class="ti ti-check me-2"></i></div>
    <div>{{ t('design.msg_' ~ msg) }}</div>
  </div>
</div>
{% endif %}

<div class="row row-cards">
  <div class="col-12">
    <div class="card mb-3">
      <div class="card-header">
        <h3 class="card-title">{{ t('design.all_drafts') if is_admin else t('design.my_drafts') }}</h3>
      </div>
      {% if drafts %}
      <div class="table-responsive">
        <table class="table table-vcenter card-table table-striped">
          <thead>
            <tr>
              <th>{{ t('design.report_code') }}</th>
              <th>{{ t('design.report_name') }}</th>
              <th>{{ t('design.status') }}</th>
              <th>{{ t('design.author') }}</th>
              <th>{{ t('design.updated_at') }}</th>
              <th class="w-1">{{ t('design.actions') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for d in drafts %}
            <tr>
              <td>
                <a href="/design/drafts/{{ d.draft_id }}"><strong>{{ d.report_code }}</strong></a>
              </td>
              <td>{{ d.content_json.get('report_name', '') }}</td>
              <td>
                {% if d.status == 'DRAFT' %}
                <span class="badge bg-secondary">{{ t('design.status_DRAFT') }}</span>
                {% elif d.status == 'PENDING' %}
                <span class="badge bg-warning">{{ t('design.status_PENDING') }}</span>
                {% elif d.status == 'APPROVED' %}
                <span class="badge bg-success">{{ t('design.status_APPROVED') }}</span>
                {% elif d.status == 'REJECTED' %}
                <span class="badge bg-danger">{{ t('design.status_REJECTED') }}</span>
                {% endif %}
              </td>
              <td class="text-secondary">{{ d.author }}</td>
              <td class="text-secondary">{{ d.updated_at.strftime('%Y-%m-%d %H:%M') if d.updated_at else '' }}</td>
              <td>
                <a href="/design/drafts/{{ d.draft_id }}" class="btn btn-sm btn-outline-secondary">
                  {{ t('design.open') }}
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="card-body text-center text-secondary py-4">
        {{ t('design.no_drafts') }}
      </div>
      {% endif %}
    </div>
  </div>

  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">{{ t('design.editable_reports') }}</h3>
      </div>
      {% if editable_reports %}
      <div class="table-responsive">
        <table class="table table-vcenter card-table table-striped">
          <thead>
            <tr>
              <th>{{ t('design.report_code') }}</th>
              <th>{{ t('design.report_name') }}</th>
              <th>{{ t('design.group') }}</th>
              <th>{{ t('design.datasource') }}</th>
              <th class="w-1">{{ t('design.actions') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for r in editable_reports %}
            <tr>
              <td><code>{{ r.report_code }}</code></td>
              <td>{{ r.report_name }}</td>
              <td class="text-secondary">{{ r.group.group_name }}</td>
              <td class="text-secondary">{{ r.datasource.datasource_name if r.datasource else '' }}</td>
              <td>
                <form method="post" action="/design/reports/{{ r.report_code }}/edit" class="m-0">
                  <input type="hidden" name="csrf_token" value="{{ auth.csrf_token }}">
                  <button type="submit" class="btn btn-sm btn-outline-primary">
                    <i class="ti ti-edit me-1"></i>{{ t('design.propose_change') }}
                  </button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="card-body text-center text-secondary py-4">
        {{ t('design.no_editable_reports') }}
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}