<view class="switcher {{show ? 'switcher--open' : ''}}" catchtouchmove="noop">
  <view class="switcher__overlay {{show ? 'switcher__overlay--visible' : ''}}" bindtap="onOverlayTap"></view>
  <view class="switcher__sheet" catchtap="noop">
    <sheet-header title="{{text.titleSelect}}" bind:close="onClose" />

    <!-- List body -->
    <scroll-view scroll-y class="switcher__list">
      <view wx:if="{{sections.length === 0}}" class="switcher__row switcher__row--muted">{{text.empty}}</view>
      <block wx:for="{{sections}}" wx:key="serverId" wx:for-item="section">
        <view class="switcher__section-title">
          <view class="switcher__section-info">
            <text wx:if="{{section.userLabel}}" class="switcher__section-user">{{section.userLabel}}</text>
            <view wx:if="{{section.userLabel && section.apiBaseUrl}}" class="switcher__section-dot"></view>
            <text wx:if="{{section.apiBaseUrl}}" class="switcher__section-url">{{section.apiBaseUrl}}</text>
          </view>
          <view
            class="switcher__section-sign-out"
            role="button"
            aria-label="{{text.signOut}}"
            data-server-id="{{section.serverId}}"
            bindtap="onRemoveServer"
            hover-class="switcher__section-sign-out--hover"
          >{{text.signOut}}</view>
        </view>

        <block wx:if="{{section.loading}}">
          <view class="switcher__row switcher__row--muted">{{text.loading}}</view>
        </block>
        <block wx:elif="{{section.error}}">
          <view class="switcher__row switcher__row--error">{{section.error}}</view>
        </block>
        <block wx:elif="{{section.workspaces.length === 0}}">
          <view class="switcher__row switcher__row--muted">{{text.empty}}</view>
        </block>
        <block wx:else>
          <view
            wx:for="{{section.workspaces}}"
            wx:key="id"
            wx:for-item="ws"
            class="switcher__row"
            data-server-id="{{section.serverId}}"
            data-workspace-id="{{ws.id}}"
            data-workspace-name="{{ws.name || ws.slug || ws.id}}"
            data-member-display-name="{{ws.memberDisplayName}}"
            bindtap="onPickWorkspace"
            hover-class="switcher__row--hover"
          >
            <view class="switcher__row-badge">{{ws.initials}}</view>
            <view class="switcher__row-body">
              <text class="switcher__row-name">{{ws.name || ws.slug || ws.id}}</text>
            </view>
            <text
              wx:if="{{ws.id === currentWorkspaceId && section.serverId === currentServerId}}"
              class="switcher__row-check"
            >✓</text>
          </view>
        </block>
      </block>

      <view class="switcher__appearance">
        <view class="switcher__appearance-title">{{text.appearanceTitle}}</view>
        <picker
          class="switcher__appearance-language"
          mode="selector"
          range="{{localeOptions}}"
          range-key="label"
          value="{{localeIndex}}"
          bindchange="onLocaleChange"
        >
          <view class="switcher__appearance-row" hover-class="switcher__appearance-row--hover">
            <text class="switcher__appearance-label">{{text.language}}</text>
            <view class="switcher__appearance-value">
              <text>{{localeOptions[localeIndex].label}}</text>
              <text class="switcher__appearance-chevron">›</text>
            </view>
          </view>
        </picker>
        <view class="switcher__appearance-row">
          <text class="switcher__appearance-label">{{text.theme}}</text>
          <radio-group class="switcher__appearance-segmented" bindchange="onThemeChange">
            <label wx:for="{{themeOptions}}" wx:key="value" class="switcher__appearance-option {{appearanceTheme === item.value ? 'switcher__appearance-option--active' : ''}}">
              <radio value="{{item.value}}" checked="{{appearanceTheme === item.value}}" />
              <text>{{item.label}}</text>
            </label>
          </radio-group>
        </view>
        <view class="switcher__appearance-scheme-label">{{text.colorScheme}}</view>
        <view class="switcher__appearance-schemes">
          <view wx:for="{{colorSchemeOptions}}" wx:key="value" class="switcher__appearance-scheme {{appearanceColorScheme === item.value ? 'switcher__appearance-scheme--active' : ''}}" data-color-scheme="{{item.value}}" bindtap="onColorSchemeTap">
            <view class="switcher__appearance-swatch switcher__appearance-swatch--{{item.value}}"></view>
            <text>{{item.label}}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- QR-only add entry. Always visible at the bottom. -->
    <view class="switcher__footer">
      <view class="switcher__footer-actions">
        <view
          class="switcher__footer-btn switcher__footer-btn--primary {{scanSubmitting ? 'switcher__footer-btn--disabled' : ''}}"
          bindtap="onScanWorkspaceLink"
          hover-class="switcher__footer-btn--hover"
        >
          <view class="switcher__footer-btn-icon icon icon--sm icon--qr-code"></view>
          <text class="switcher__footer-btn-label">{{scanSubmitting ? text.scanSubmitting : text.scanQRCode}}</text>
        </view>
      </view>
      <view class="switcher__footer-hint">{{text.qrHint}}</view>
    </view>
  </view>
</view>
