{% with cell=field.cell %}
<div class="organization-dashboard-widget-field{% if field.primary %} is-primary{% endif %}">
    <span class="organization-dashboard-widget-field-label">{{ field.label }}</span>

    <div class="organization-dashboard-widget-field-value">
        {% if cell.kind == 'totp' %}
            <div
                class="module-totp-cell{% if cell.allowed and cell.refresh_url %} js-totp-cell{% endif %}"
                {% if cell.allowed and cell.refresh_url %}data-totp-url="{{ cell.refresh_url }}"{% endif %}
            >
                {% if cell.configured %}
                    <span class="module-secret-dots" aria-label="Protected TOTP code">••••••</span>

                    {% if cell.allowed and cell.refresh_url %}
                        <button
                            type="button"
                            class="module-secret-action js-totp-view"
                            aria-label="View current TOTP code"
                        >
                            <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true" focusable="false">
                                <path fill="currentColor" d="M12 5c5.5 0 9.5 4.6 10.8 6.4a1 1 0 0 1 0 1.2C21.5 14.4 17.5 19 12 19S2.5 14.4 1.2 12.6a1 1 0 0 1 0-1.2C2.5 9.6 6.5 5 12 5Zm0 2c-4.1 0-7.3 3.2-8.7 5 1.4 1.8 4.6 5 8.7 5s7.3-3.2 8.7-5C19.3 10.2 16.1 7 12 7Zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" />
                            </svg>
                            <span class="module-secret-tooltip js-totp-tooltip" role="tooltip">Hover to reveal</span>
                        </button>

                        <button
                            type="button"
                            class="module-secret-action js-totp-copy"
                            title="Copy current TOTP code"
                            aria-label="Copy current TOTP code"
                        >
                            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
                                <path fill="currentColor" d="M8 7V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-2v2a4 4 0 0 1-4 4H5a3 3 0 0 1-3-3v-8a4 4 0 0 1 4-4h2Zm3-3a1 1 0 0 0-1 1v2h3a4 4 0 0 1 4 4v3h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-8Zm2 5H6a2 2 0 0 0-2 2v8a1 1 0 0 0 1 1h8a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Z" />
                            </svg>
                        </button>

                        <span class="module-totp-countdown js-totp-countdown">Loading…</span>
                    {% endif %}
                {% else %}
                    <span class="module-table-empty">—</span>
                {% endif %}
            </div>

        {% elif cell.kind == 'secret' %}
            <div class="module-secret-cell">
                {% if cell.configured %}
                    <span class="module-secret-dots" aria-label="Protected secret">••••••••</span>

                    {% if cell.allowed and cell.secret_url %}
                        <button
                            type="button"
                            class="module-secret-action js-secret-view"
                            data-secret-url="{{ cell.secret_url }}?purpose=view"
                            aria-label="View secret"
                        >
                            <svg viewBox="0 0 24 24" width="17" height="17" aria-hidden="true" focusable="false">
                                <path fill="currentColor" d="M12 5c5.5 0 9.5 4.6 10.8 6.4a1 1 0 0 1 0 1.2C21.5 14.4 17.5 19 12 19S2.5 14.4 1.2 12.6a1 1 0 0 1 0-1.2C2.5 9.6 6.5 5 12 5Zm0 2c-4.1 0-7.3 3.2-8.7 5 1.4 1.8 4.6 5 8.7 5s7.3-3.2 8.7-5C19.3 10.2 16.1 7 12 7Zm0 2.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" />
                            </svg>
                            <span class="module-secret-tooltip" role="tooltip">Hover to reveal</span>
                        </button>

                        <button
                            type="button"
                            class="module-secret-action js-copy-secret"
                            data-secret-url="{{ cell.secret_url }}?purpose=copy"
                            title="Copy secret to clipboard"
                            aria-label="Copy secret to clipboard"
                        >
                            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
                                <path fill="currentColor" d="M8 7V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-2v2a4 4 0 0 1-4 4H5a3 3 0 0 1-3-3v-8a4 4 0 0 1 4-4h2Zm3-3a1 1 0 0 0-1 1v2h3a4 4 0 0 1 4 4v3h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-8Zm2 5H6a2 2 0 0 0-2 2v8a1 1 0 0 0 1 1h8a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2Z" />
                            </svg>
                        </button>
                    {% endif %}
                {% else %}
                    <span class="module-table-empty">—</span>
                {% endif %}
            </div>

        {% else %}
            {% if field.primary and row.view_url %}
                <a
                    class="organization-dashboard-widget-primary-link js-record-modal"
                    href="{{ row.view_url }}"
                    data-record-modal-url="{{ row.modal_url }}"
                    data-record-modal-title="{{ row.primary|escape }}"
                    data-record-modal-refresh="1"
                    {% if cell.full %}title="{{ cell.full|escape }}"{% endif %}
                >{{ cell.display }}</a>
            {% else %}
                <span
                    class="organization-dashboard-widget-value-text"
                    {% if cell.full and cell.truncated %}title="{{ cell.full|escape }}"{% endif %}
                >{{ cell.display }}</span>
            {% endif %}

            {% if field.summary_hover %}
                <span
                    class="organization-dashboard-summary-hover"
                    tabindex="0"
                    aria-label="Summary: {{ field.summary_hover|escape }}"
                >
                    <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false">
                        <path fill="currentColor" d="M11 10h2v7h-2v-7Zm0-3h2v2h-2V7Zm1-5a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" />
                    </svg>
                    <span class="organization-dashboard-summary-tooltip" role="tooltip">{{ field.summary_hover }}</span>
                </span>
            {% endif %}
        {% endif %}
    </div>
</div>
{% endwith %}