.panel.panel-default.account-panel.panel-right.extensions-panel
  .panel-body
    %div{"style" => "font-size: 18px;", "ng-if" => "!extensionManager.extensions.length"} No extensions installed
    .registered-extensions{"ng-if" => "extensionManager.extensions.length"}
      .extension{"ng-repeat" => "extension in extensionManager.extensions", "ng-init" => "extension.formData = {}"}
        .extension-name {{extension.name}}
        .encryption-format
          .title Send data:
          %label
            %input{"type" => "radio", "ng-model" => "extension.encrypted", "ng-value" => "true", "ng-change" => "changeExtensionEncryptionFormat(true, extension)"}
            Encrypted
          %label
            %input{"type" => "radio", "ng-model" => "extension.encrypted", "ng-value" => "false", "ng-change" => "changeExtensionEncryptionFormat(false, extension)"}
            Decrypted
        .extension-actions
          .action{"ng-repeat" => "action in extension.actionsInGlobalContext()"}
            .action-name {{action.label}}
            .action-desc{"style" => "font-style: italic;"} {{action.desc}}
            .execute-type{"ng-if" => "action.repeat_mode == 'watch'"}
              Repeats when a change is made to your items.
            .execute-type{"ng-if" => "action.repeat_mode == 'loop'"}
              Repeats at most once every {{action.repeat_timeout}} seconds
            .action-permissions
              %a{"ng-click" => "action.showPermissions = !action.showPermissions"} {{action.showPermissions ? "Hide permissions" : "Show permissions"}}
              %div{"ng-if" => "action.showPermissions"}
                {{action.permissionsString}}
                .encryption-type
                  %span {{action.encryptionModeString}}

            .execute
              %div{"ng-if" => "action.repeat_mode"}
                %div{"ng-if" => "extensionManager.isRepeatActionEnabled(action)", "ng-click" => "extensionManager.disableRepeatAction(action, extension)"} Disable
                %div{"ng-if" => "!extensionManager.isRepeatActionEnabled(action)", "ng-click" => "extensionManager.enableRepeatAction(action, extension)"} Enable
              %div{"ng-if" => "!action.repeat_mode", "ng-click" => "selectedAction(action, extension)"}
                %div{"ng-if" => "!action.running"}
                  Perform Action
                %div{"ng-if" => "action.running"}
                  .spinner.execution-spinner
            .last-run{"ng-if" => "!action.error && action.lastExecuted && !action.running"}
              Last run {{action.lastExecuted | appDateTime}}
            .error{"ng-if" => "action.error"}
              Error performing action.

        %a.option-link{"ng-click" => "deleteExtension(extension)"} Remove extension

    .extension-link
      %a{"ng-click" => "toggleExtensionForm()"} Add new extension

    %form.extension-form{"ng-if" => "showNewExtensionForm"}
      .form-tag.has-feedback
        %input.form-control{:autofocus => 'autofocus', :name => 'url', :placeholder => 'Extension URL', :required => true, :type => 'url', 'ng-model' => 'newExtensionData.url'}
      %button.btn.dark-button.btn-block{"ng-click" => "submitNewExtensionForm()", :type => 'submit', "data-style" => "expand-right", "data-size" => "s", "state" => "buttonState"}
        %span.ladda-label Add Extension

    .extension-link
      %a{"ng-click" => "reloadExtensionsPressed()", "ng-if" => "extensionManager.extensions.length > 0"} Reload all extensions
    .extension-link
      %a{"href" => "https://standardnotes.org/extensions", "target" => "_blank"} List of available extensions