%h3{"ng-click" => "showSection = !showSection"}
  %a Your sync accounts ({{syncProviders.length}})

%div{"ng-if" => "showSection || syncManager.syncProviders.length > 0"}
  .small-v-space
  %section.white-bg.medium-padding{"ng-repeat" => "provider in syncProviders"}
    %label {{!provider.enabled ? 'Not enabled' : (provider.primary ? 'Main' : 'Secondary')}}
    %em{"ng-if" => "provider.keyName"} Using key: {{provider.keyName}}
    %p {{provider.url}}
    %section.inline-h
      %div{"ng-if" => "!provider.keyName || provider.showKeyForm"}
        %p
          %strong Choose encryption key:
        %select{"ng-model" => "provider.formData.keyName"}
          %option{"ng-repeat" => "key in keys", "ng-selected" => "{{key.name == provider.formData.keyName}}", "value" => "{{key.name}}"}
            {{key.name}}
        %button{"ng-click" => "saveKey(provider)"} Set

      %button.light{"ng-if" => "!provider.enabled || !provider.primary", "ng-click" => "enableSyncProvider(provider, true)"} Set as Main
      %button.light{"ng-if" => "syncProviders.length > 1 && !provider.secondary && (!provider.primary || !provider.enabled)", "ng-click" => "enableSyncProvider(provider, false)"} Add as Secondary

      %button.light{"ng-if" => "provider.keyName", "ng-click" => "changeEncryptionKey(provider)"} Change Encryption Key
      %button.light{"ng-click" => "removeSyncProvider(provider)"} Remove Account

      .mt-15{"ng-if" => "provider.error"}
        %strong.red Error syncing: {{provider.error.message}}
      .mt-15{"style" => "height: 15px;", "delay-hide" => "true", "show" => "provider.syncOpInProgress", "delay" => "1000"}
        .spinner{"style" => "float: left; margin-top: 3px; margin-left: 2px;"}
        %strong{"style" => "float: left; margin-left: 7px;"} Syncing:
          {{provider.syncStatus.statusString}}