{# GENERATED by FlaskForge Core 0.36.0 from resolved layout page pg_05ee1a7c — do not edit.
   Injection point: custom/dashboard_extra.html (rendered last). Escape hatch:
   an "html" node's content is emitted verbatim and is yours. #}
{% extends "base.html" %}
{% block title %}FlaskForge Demo — Overview{% endblock %}

{% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<div class="row g-3 align-items-start">
  <div class="col-12 col-md-8">
    <h1>FlaskForge Demo</h1>
    <p>Clinic operations at a glance.</p>
    <p>Track patients, clinicians and treatment episodes from one place.</p>
    {% if (current_user.is_authenticated == True) %}<a class="btn btn-primary" href="{{ url_for('patients.patient_create') }}">Add Patient</a>{% else %}<button class="btn btn-primary" type="button" disabled aria-disabled="true">Add Patient</button>{% endif %}
    {% if (current_user.is_authenticated == True) %}<form method="post" action="{{ url_for('workflows.run_wf_dashboard_demo') }}" class="d-inline"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><button class="btn btn-success" type="submit">Run workflow demo</button></form>{% else %}<button class="btn btn-success" type="button" disabled aria-disabled="true">Run workflow demo</button>{% endif %}
  </div>
  <div class="col-12 col-md-4">
    <img src="https://placehold.co/480x300" alt="clinic" class="img-fluid rounded" style="width:100%">
  </div>
</div>
<div style="height:12px"></div>
<div class="row g-3 align-items-start">
  <div class="col-12 col-md-4">
    <div class="card text-center mb-3"><div class="card-body">
      <div class="display-6">{{ ctx1 }}</div>
      <div class="text-muted">Patients</div>
    </div></div>
  </div>
  <div class="col-12 col-md-4">
    <div class="card text-center mb-3"><div class="card-body">
      <div class="display-6">{{ ctx2 }}</div>
      <div class="text-muted">Clinicians</div>
    </div></div>
  </div>
  <div class="col-12 col-md-4">
    <div class="card text-center mb-3"><div class="card-body">
      <div class="display-6">{{ ctx3 }}</div>
      <div class="text-muted">Episodes</div>
    </div></div>
  </div>
</div>
<hr>
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#nd-tabs1-0" type="button">Recent Patients</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#nd-tabs1-1" type="button">Open Episodes</button></li>
  <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#nd-tabs1-2" type="button">About</button></li>
</ul>
<div class="tab-content border border-top-0 p-3 mb-3">
  <div class="tab-pane fade show active" id="nd-tabs1-0">
    <table class="table table-sm table-hover">
      <thead><tr><th>Last Name</th><th>First Name</th><th>Created</th></tr></thead>
      <tbody>
        {% for r_ in ctx4 %}
        <tr><td><a href="{{ url_for('patients.patients_detail', id=r_.id) }}">{{ r_.last_name }}</a></td><td>{{ r_.first_name or "" }}</td><td>{{ r_.created_at.strftime("%Y-%m-%d") if r_.created_at else "" }}</td></tr>
        {% else %}<tr><td colspan="3" class="text-muted">Nothing yet.</td></tr>{% endfor %}
      </tbody>
    </table>
  </div>
  <div class="tab-pane fade" id="nd-tabs1-1">
    <table class="table table-sm table-hover">
      <thead><tr><th>Status</th><th>Start Date</th></tr></thead>
      <tbody>
        {% for r_ in ctx5 %}
        <tr><td><a href="{{ url_for('episodes.episodes_detail', id=r_.id) }}">{{ r_.status }}</a></td><td>{{ r_.start_date or "" }}</td></tr>
        {% else %}<tr><td colspan="2" class="text-muted">Nothing yet.</td></tr>{% endfor %}
      </tbody>
    </table>
  </div>
  <div class="tab-pane fade" id="nd-tabs1-2">
    <div class="card mb-3">
      <div class="card-header">About this app</div>
      <div class="card-body">
        <p>Generated by FlaskForge from a structured app model.</p>
        {# user html node nd_ht01 — emitted verbatim #}
<em>This block is a raw-HTML escape hatch — edit freely.</em>
      </div>
    </div>
  </div>
</div>
<div class="card mb-3"><div class="card-body">
  <h5 class="card-title">Episodes by status</h5>
  <canvas id="nd-ch01" height="120"></canvas>
</div></div>
<script>
new Chart(document.getElementById("nd-ch01"), {
  type: "bar",
  data: { labels: {{ ctx6_labels | tojson }},
    datasets: [{ label: "Episodes by status",
      data: {{ ctx6_values | tojson }} }] },
  options: { plugins: { legend: { display: false } } }
});
</script>
<h3>Notes</h3>
<p>This dashboard is <strong>generated</strong> — see <a href="https://example.com">FlaskForge</a>.</p>
<ul><li>stats update live</li><li>charts group by entity fields</li></ul>
<div class="card mb-3">
  <div class="card-header">Quick add patient</div>
  <div class="card-body">
    {% if current_user.is_authenticated %}
    <form method="post" action="{{ url_for('patients.patient_create') }}" novalidate>
      {{ ctx7.hidden_tag() }}
      <div class="row mb-3">
        <div class="col-md-6">
          <label class="form-label" for="{{ ctx7.first_name.id }}">{{ ctx7.first_name.label.text }}</label>
          {{ ctx7.first_name(class="form-control") }}
        </div>
        <div class="col-md-6">
          <label class="form-label" for="{{ ctx7.last_name.id }}">{{ ctx7.last_name.label.text }}</label>
          {{ ctx7.last_name(class="form-control") }}
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-md-4">
          <label class="form-label" for="{{ ctx7.date_of_birth.id }}">{{ ctx7.date_of_birth.label.text }}</label>
          {{ ctx7.date_of_birth(class="form-control") }}
        </div>
        <div class="col-md-4">
          <label class="form-label" for="{{ ctx7.phone.id }}">{{ ctx7.phone.label.text }}</label>
          {{ ctx7.phone(class="form-control") }}
        </div>
        <div class="col-md-4 d-flex align-items-end">
          <div class="form-check">
            {{ ctx7.active(class="form-check-input") }}
            <label class="form-check-label" for="{{ ctx7.active.id }}">{{ ctx7.active.label.text }}</label>
          </div>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-md-6">
          <label class="form-label" for="{{ ctx7.clinician_id.id }}">{{ ctx7.clinician_id.label.text }}</label>
          {{ ctx7.clinician_id(class="form-select") }}
          <div class="form-text">Primary clinician responsible for this patient.</div>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col-md-6">
          <label class="form-label" for="{{ ctx7.care_team.id }}">{{ ctx7.care_team.label.text }}</label>
          {{ ctx7.care_team(class="form-select") }}
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Add patient</button>
    </form>
    {% endif %}
  </div>
</div>

{% include "custom/dashboard_extra.html" ignore missing %}
{% endblock %}