<div class="syrinscape-provider-panel">

    {{!-- Card A: Foundry Audio --}}
    <div class="syrinscape-provider-card syrinscape-provider-card--foundry{{#if isFoundryActive}} is-active{{else}} is-inactive{{/if}}">

        <div class="foundry-toggle syrinscape-provider-toggle" data-panel="foundry">
            <span class="syrinscape-provider-toggle-label">
                <i class="fas fa-volume-up"></i>
                <span class="syrinscape-provider-title-block">
                    <span class="syrinscape-provider-title">Foundry Audio</span>
                    <span class="syrinscape-provider-tagline">Local and bundled sounds</span>
                </span>
            </span>
            <span class="syrinscape-provider-toggle-meta">
                {{#if isFoundryActive}}
                <span class="syrinscape-provider-status syrinscape-provider-status--active">
                    <i class="fas fa-check-circle"></i> Active
                </span>
                {{/if}}
                <i class="fas fa-chevron-{{#if expandFoundry}}down{{else}}right{{/if}} foundry-chevron syrinscape-provider-chevron"></i>
            </span>
        </div>

        <div class="foundry-section syrinscape-provider-body{{#if expandFoundry}} is-open{{/if}}">
            {{#if isFoundryActive}}
            <div class="syrinscape-provider-active-banner">
                <i class="fas fa-check-circle"></i>
                <span>Foundry audio is the active sound source. Local packs play without Syrinscape.</span>
            </div>
            {{else}}
            <p class="syrinscape-provider-note notes">
                {{#if isSyrinscapeActive}}
                Foundry and pack sounds are still playing. Use this only to clear your Syrinscape token and drop cloud overrides.
                {{else}}
                Run combat and pack sounds locally with no Syrinscape token.
                {{/if}}
            </p>
            <button type="button" class="skip-provider-btn syrinscape-provider-action syrinscape-provider-action--select">
                <i class="fas fa-volume-up"></i> Use Foundry Audio Only
            </button>
            {{/if}}
        </div>

    </div>

    {{!-- Card B: Syrinscape --}}
    <div class="syrinscape-provider-card syrinscape-provider-card--syrin{{#if isSyrinscapeActive}} is-active{{else}} is-inactive{{/if}}">

        <div class="syrin-toggle syrinscape-provider-toggle syrinscape-provider-toggle--accent" data-panel="syrinscape">
            <span class="syrinscape-provider-toggle-label">
                <i class="fas fa-plug syrinscape-provider-toggle-icon"></i>
                <span class="syrinscape-provider-title-block">
                    <span class="syrinscape-provider-title">Foundry Audio &amp; Syrinscape</span>
                    <span class="syrinscape-provider-tagline">Cloud-hosted sounds for Calibration slots</span>
                </span>
            </span>
            <span class="syrinscape-provider-toggle-meta">
                {{#if isSyrinscapeActive}}
                <span class="syrinscape-provider-status syrinscape-provider-status--active">
                    <i class="fas fa-check-circle"></i> Active
                </span>
                {{/if}}
                <i class="fas fa-chevron-{{#if expandSyrin}}down{{else}}right{{/if}} syrin-chevron syrinscape-provider-chevron"></i>
            </span>
        </div>

        <div class="syrin-section syrinscape-provider-body syrinscape-provider-body--syrin{{#if expandSyrin}} is-open{{/if}}">

            {{#if isSyrinscapeActive}}
            <div class="syrinscape-provider-active-banner">
                <i class="fas fa-check-circle"></i>
                <span>Syrinscape is connected. Foundry and pack sounds still play by default.</span>
            </div>
            {{/if}}

            <p class="syrinscape-provider-note notes">
                {{#if isSyrinscapeActive}}
                Use Resonance Calibration to swap individual slots to Syrinscape sounds. Slots you do not override keep using Foundry audio.
                {{else}}
                A token unlocks Syrinscape in the sound picker. Foundry and pack sounds keep playing until you assign a Syrinscape override per slot.
                {{/if}}
            </p>

            <label class="syrinscape-token-label">Auth Token</label>

            <div class="syrinscape-token-row">
                <input type="password" name="authToken" class="attunement-token-input syrinscape-token-input" value="{{token}}"
                    placeholder="Paste token here…">
                <button type="button" class="toggle-visibility syrinscape-token-visibility" title="Show token">
                    <i class="fas fa-eye"></i>
                </button>
            </div>

            <button type="button" class="verify-syrinscape-btn syrinscape-provider-action syrinscape-provider-action--primary">
                <i class="fas fa-plug"></i> {{#if isSyrinscapeActive}}Re-verify Syrinscape{{else}}Verify &amp; Connect Syrinscape{{/if}}
            </button>

            {{#if mismatch}}
            <div class="syrinscape-inline-notice syrinscape-inline-notice--warning">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Token Mismatch.</strong> Verification will synchronize Resonance and Syrinscape Control.
            </div>
            {{/if}}

            {{#if hasSyrinControl}}
            <div class="syrinscape-inline-notice syrinscape-inline-notice--info">
                <i class="fas fa-link"></i>
                <strong>Syrinscape Control detected.</strong>
                A token is still required so Resonance can read your library metadata.
            </div>
            {{/if}}

            <p class="syrinscape-token-help">
                Find your token: <a href="https://syrinscape.com/online/cp/" target="_blank">Syrinscape Control Panel</a>
                → Your Game → Show Auth Token.
            </p>

        </div>

    </div>

</div>
