{% extends "layout.html.tera" %}
{% block title %}Data quality — {{ record.label }} — {{ app_display }}{% endblock title %}
{% block content %}
<nav class="breadcrumb-nav" aria-label="Breadcrumb">
<ol class="breadcrumb-list" aria-label="Breadcrumb trail">
<li class="breadcrumb-list-item"><a href="/">Home</a></li>
<li class="breadcrumb-list-item"><a href="/{{ entity_plural }}">{{ entity_plural | capitalize }}</a></li>
<li class="breadcrumb-list-item"><a href="/{{ entity_plural }}/{{ record.id }}">{{ record.label }}</a></li>
<li class="breadcrumb-list-item" aria-current="page">Data quality</li>
</ol>
</nav>
<section aria-label="Data quality score">
<h2>Data quality — {{ record.label }}</h2>
<div class="information-callout" aria-label="Data quality explainer">
<p>
Quality is the share of {{ entity_singular }} fields that are populated
and pass validation. A perfect record has identifiers, contacts, addresses,
a verified document, and (where applicable) consent on file.
</p>
</div>
<div class="card" role="region" aria-label="Overall quality">
<h3>Overall</h3>
<p>
<span class="five-star-rating-view"
role="img"
aria-label="Overall quality: {{ overall.stars }} of 5 stars">
{% for i in range(end=5) %}{% if i < overall.stars %}★{% else %}☆{% endif %}{% endfor %}
</span>
<span class="hint" aria-label="Star count">{{ overall.stars }} / 5</span>
</p>
<p>
<span class="five-face-rating-view"
role="img"
aria-label="Satisfaction face: {{ overall.face }}">
{{ overall.face_emoji }}
</span>
<span class="hint" aria-label="Face descriptor">{{ overall.face }}</span>
</p>
<p>
<strong>{{ overall.score_pct }}%</strong>
complete ·
<meter class="meter"
aria-label="Overall completeness {{ overall.score_pct }} percent"
min="0"
max="100"
low="40"
high="80"
optimum="100"
value="{{ overall.score_pct }}">{{ overall.score_pct }}%</meter>
</p>
</div>
<h3>Per-component breakdown</h3>
<table class="data-table" aria-label="Per-component data quality">
<thead class="data-table-head">
<tr class="data-table-row">
<th class="data-table-th" scope="col">Component</th>
<th class="data-table-th" scope="col">Score</th>
<th class="data-table-th" scope="col">Stars</th>
<th class="data-table-th" scope="col">Notes</th>
</tr>
</thead>
<tbody class="data-table-body">
{% for c in components %}
<tr class="data-table-row">
<td class="data-table-td"><strong>{{ c.label }}</strong></td>
<td class="data-table-td">
<meter class="meter"
aria-label="{{ c.label }} score {{ c.score_pct }} percent"
min="0" max="100" low="40" high="80" optimum="100"
value="{{ c.score_pct }}">{{ c.score_pct }}%</meter>
<span>{{ c.score_pct }}%</span>
</td>
<td class="data-table-td">
<span class="five-star-rating-view"
role="img"
aria-label="{{ c.label }}: {{ c.stars }} of 5 stars">
{% for i in range(end=5) %}{% if i < c.stars %}★{% else %}☆{% endif %}{% endfor %}
</span>
</td>
<td class="data-table-td">{{ c.note }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% if suggestions and suggestions | length > 0 %}
<h3>Recommended improvements</h3>
<ol class="summary-list" aria-label="Recommended improvements">
{% for s in suggestions %}
<li class="summary-list-item">
<dl>
<dt>
{% if s.severity == "high" %}
<span class="badge" data-type="error" aria-label="High priority">High</span>
{% elif s.severity == "medium" %}
<span class="badge" data-type="warning" aria-label="Medium priority">Medium</span>
{% else %}
<span class="badge" data-type="info" aria-label="Low priority">Low</span>
{% endif %}
{{ s.title }}
</dt>
<dd>
{{ s.body }}
{% if s.action_label and s.action_href %}
— <a href="{{ s.action_href }}" aria-label="{{ s.action_label }}">{{ s.action_label }}</a>
{% endif %}
</dd>
</dl>
</li>
{% endfor %}
</ol>
{% endif %}
<div class="action-bar" role="toolbar" aria-label="Quality actions">
<a class="button"
href="/{{ entity_plural }}/{{ record.id }}/edit"
aria-label="Edit {{ entity_singular }} to improve quality">Edit record</a>
<a class="button"
href="/{{ entity_plural }}/{{ record.id }}"
aria-label="Back to {{ entity_singular }} detail">Back</a>
</div>
</section>
{% endblock content %}