.sn-component{"ng-if" => "issueLoading"}
  .sk-app-bar.no-edges.no-top-edge
    .left
      .sk-app-bar-item
        .sk-label.warning There was an issue loading {{component.name}}.
    .right
      .sk-app-bar-item{"ng-click" => "reloadComponent()"}
        .sk-label Reload

.sn-component{"ng-if" => "showNoThemesMessage"}
  .sk-app-bar.no-edges.no-top-edge
    .left
      .sk-app-bar-item
        .sk-label.warning This extension does not support themes.
    .right
      .sk-app-bar-item{"ng-click" => "noThemesMessageDismiss()"}
        .sk-label Dismiss
      .sk-app-bar-item{"ng-click" => "disableActiveTheme()"}
        .sk-label Disable Active Theme

.sn-component{"ng-if" => "expired"}
  .sk-app-bar
    .left
      .sk-app-bar-item
        .sk-app-bar-item-column
          .sk-circle.danger.small
        .sk-app-bar-item-column
          %a.sk-label.sk-base{"href" => "https://dashboard.standardnotes.org", "target" => "_blank"}
            Your Extended subscription expired on {{component.dateToLocalizedString(component.valid_until)}}.
            Extensions are in a read-only state.
    .right
      .sk-app-bar-item
        .sk-app-bar-item-column
          %a.sk-label{"href" => "https://standardnotes.org/help", "target" => "_blank"} Help

.sn-component{"ng-if" => "error == 'offline-restricted'"}
  .sk-panel.static
    .sk-panel-content
      .sk-panel-section.stretch
        .sk-panel-section-title You have restricted this extension to be used offline only.
        %p Offline extensions are not available in the Web app.
        .sk-panel-row
          .sk-panel-column
            %p You can either:
            %p
              %ul
                %li <strong>Enable the Hosted option</strong> for this extension by opening the 'Extensions' menu and toggling 'Use hosted when local is unavailable' under this extension's options. Then press Reload below.
                %li <strong>Use the Desktop application.</strong>
        .sk-panel-row
          .sk-button.info{"ng-if" => "!reloading", "ng-click" => "reloadStatus()"}
            .sk-label Reload
          .sk-spinner.info.small{"ng-if" => "reloading"}

.sn-component{"ng-if" => "error == 'url-missing'"}
  .sk-panel.static
    .sk-panel-content
      .sk-panel-section.stretch
        .sk-panel-section-title This extension is not installed correctly.
        %p Please uninstall {{component.name}}, then re-install it.

        %p
          This issue can occur if you access Standard Notes using an older version of the app.
          Ensure you are running at least version 2.1 on all platforms.


%iframe{"ng-if" => "component && componentValid",
  "ng-attr-id" => "component-iframe-{{component.uuid}}",
  "ng-src" => "{{getUrl() | trusted}}", "frameBorder" => "0",
  "sandbox" => "allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms",
  "data-component-id" => "{{component.uuid}}"}
  Loading

.loading-overlay{"ng-if" => "loading"}