{% macro repo_card(repo) -%}
  {% set status_color = {'ok': bs_colors.success, 'in_progress': bs_colors.info, 'broken': bs_colors.danger}.get(repo.status[0], bs_colors.warning) %}
  <table width="100%"
         cellpadding="0"
         cellspacing="0"
         style="border:1px solid #e9ecef;
                border-radius:8px;
                background:#f8f9fa;
                margin-bottom:12px">
    <tbody>
      <tr>
        <td style="padding:14px 16px 10px;">
          <table width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td>
                  <div style="font-size:15px;font-weight:700;">{{ repo.display_name }}</div>
                  <div style="font-size:12px;color:#6c757d;margin-top:2px;">{{ repo.notes or mdash }}</div>
                </td>
                <td align="right" valign="top">
                  {# Status Badge #}
                  <span style="background: {{ status_color.bg_subtle }};
                               color: {{ status_color.text_emphasis }};
                               border-radius:20px;
                               padding:3px 10px;
                               font-size:11px;
                               font-weight:600">{{ repo.status[2] }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      {% if repo.status[0] != 'ok' %}
        <tr>
          <td style="padding:0 16px 10px;">
            <div style="border-radius:6px;
                        padding:8px 12px;
                        font-size:12px;
                        background: {{ status_color.bg_subtle }};
                        color: {{ status_color.text_emphasis }}">{{ repo.status[1] }}</div>
          </td>
        </tr>
      {% endif %}
      <tr>
        <td>
          <table width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td width="33%"
                    align="center"
                    style="padding:10px 8px;
                           border-top:1px solid #e9ecef;
                           border-right:1px solid #e9ecef;
                           font-size:11px;
                           color:#6c757d">
                  <div style="font-size:15px;
                              font-weight:700;
                              color:#212529;
                              margin-bottom:2px">
                    <RdwTime :value="repo.last_backup_date" />
                  </div>
                  {% trans %}Last backup{% endtrans %}
                </td>
                <td width="33%"
                    align="center"
                    style="padding:10px 8px;
                           border-top:1px solid #e9ecef;
                           border-right:1px solid #e9ecef;
                           font-size:11px;
                           color:#6c757d">
                  <div style="font-size:15px;
                              font-weight:700;
                              color:#212529;
                              margin-bottom:2px">{{ repo.backup_count or mdash }}</div>
                  {% trans %}Restore points{% endtrans %}
                </td>
                <td width="34%"
                    align="center"
                    style="padding:10px 8px;
                           border-top:1px solid #e9ecef;
                           font-size:11px;
                           color:#6c757d">
                  <div style="font-size:15px;
                              font-weight:700;
                              color:#212529;
                              margin-bottom:2px">
                    {{ repo.last_filesize | filesize if repo.last_filesize else mdash }}
                  </div>
                  {% trans %}Size{% endtrans %}
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td style="padding:10px 16px 12px;border-top:1px solid #e9ecef;">
          <table width="100%" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td style="font-size:11px;color:#6c757d;">
                  {% trans %}Oldest:{% endtrans %}
                  <strong>{{ repo.first_backup_date | format_date if repo.first_backup_date else mdash }}</strong>
                </td>
                <td align="right"
                    style="font-size:11px;
                           color:{{ bs_colors.danger.color if repo.last_error_count else '#6c757d' }};
                           font-weight:600">{{ _('%(count)s errors', count=repo.last_error_count) }}</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
{% endmacro %}