account menu sections

app/assets/templates/frontend/directives/account-menu/account-sync-section.html.haml

@@ -0,0 +1,26 @@
+%h3{"ng-click" => "showSection = !showSection"}
+  %a Your sync accounts ({{syncProviders.length}})
+
+%div{"ng-if" => "showSection"}
+  .small-v-space
+  %section.white-bg{"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
+
+      %div{"ng-if" => "!provider.enabled"}
+        %button.light{"ng-click" => "enableSyncProvider(provider, true)"} Set as Main
+        %button.light{"ng-if" => "syncProviders.length > 1", "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 Provider
+      %div{"style" => "height: 30px;", "delay-hide" => "true", "show" => "provider.syncOpInProgress", "delay" => "1000"}
+        %strong{"style" => "float: left;"} Syncing: {{provider.syncStatus.statusString}}
+        .spinner{"style" => "float: right"}