{% for share in shares %}
<div class="card">
  <div class="card-header">
    <h2><a href="/shares/{{ share.name }}">{{ share.name }}</a></h2>
    <div>
      {% if share.mounted %}
        <span class="badge badge-ok">OK</span>
      {% else %}
        <span class="badge badge-error">DOWN</span>
      {% endif %}
      {% if share.read_only %}
        <span class="badge badge-ro">RO</span>
      {% endif %}
    </div>
  </div>
  <div class="stats">
    <span><span class="label">Mount:</span> <span class="value">{{ share.mount_point }}</span></span>
    <span><span class="label">Cache:</span> <span class="value">{{ share.cache_display }}</span></span>
    <span><span class="label">Dirty:</span> <span class="value">{{ share.dirty_count }}</span></span>
    <span><span class="label">Speed:</span> <span class="value">{{ share.speed_display }}</span></span>
  </div>
</div>
{% endfor %}

<div class="protocols">
  <span class="proto-badge {% if smbd_running %}proto-on{% else %}proto-off{% endif %}">SMB: {% if smbd_running %}ON{% else %}OFF{% endif %}</span>
  <span class="proto-badge {% if nfs_exported %}proto-on{% else %}proto-off{% endif %}">NFS: {% if nfs_exported %}ON{% else %}OFF{% endif %}</span>
  <span class="proto-badge {% if webdav_running %}proto-on{% else %}proto-off{% endif %}">WebDAV: {% if webdav_running %}ON{% else %}OFF{% endif %}</span>
</div>