script#loading-template(type='text/template')
  li.loading=__('Loading') + "..."

div#plugins-page(data-role='page')
  div(data-theme=theme.headerSwatch, data-role='header')
    a(href='#index', data-role='button', data-icon='arrow-l', data-iconpos='left',
      data-inline='true', data-transition="slidefade", data-direction="reverse")=__('Back')
    <!-- ko if: $root.hasPermission('plugins', 'write') -->
    a.restart-now(data-role="button", data-icon="refresh",  data-iconpos='left', data-inline="true")=__('Restart')
    <!-- /ko -->
    h3=__('Plugins')
  div.ui-content.overthrow
    div.ui-body.ui-body-a.ui-corner-all.restart-alert(data-bind="visible: restartRequired")
      p=__('Some settings have changed, a restart is required.')
      a.restart-now(href="#")=__('Restart Now')
    div(data-role="tabs")
      div(data-role="navbar")
        ul
          li
            a.ui-btn-active(href="#installed-plugins")=__('Installed Plugins')
          li
            a(href="#download-plugins")=__('Browse Plugins')
      div#installed-plugins
        ul#plugin-list(data-role='listview', data-inset='true', data-bind="foreach: installedPlugins")
          li
            label
              h2
                span.name(data-bind="text: name")
                | 
                span.version(data-bind="text: version")
                | 
                span.loaded(data-bind="visible: loaded()")=__('loaded')
                | 
                span.activated(data-bind="visible: $data.activated()")=__('activated')
                | 
                span.compatibility-unknown(data-bind="visible: $data.isCompatible !== true")=__('compatibility unknown')
                | 
                span.update-available(data-bind="visible: $data.updateAvailable")=__('update available')
              p.description
                span(data-bind="text: description")
                | 
                a(target="_blank" data-bind="attr: {href: 'https://pimatic.org/plugins/pimatic-'+$data.name}")=__('Show Readme')
              .buttons
                a.ui-btn.ui-mini.ui-btn-inline.ui-icon-power.ui-btn-icon-left.activate(data-bind="visible: !$data.activated(), click: $root.onActivateClick")=__('Activate')
                a.ui-btn.ui-mini.ui-btn-inline.ui-icon-power.ui-btn-icon-left.deactivate(data-bind="visible: $data.activated(), click: $root.onDeactivateClick")=__('Deactivate')
                a.ui-btn.ui-mini.ui-btn-inline.ui-icon-gear.ui-btn-icon-left(data-bind="visible: $data.activated(), click: $root.onSettingsClick", href="#edit-plugin-page")=__('Settings')
                a.ui-btn.ui-mini.ui-btn-inline.delete-link.ui-icon-delete.ui-btn-icon-left(data-bind="click: $root.onUninstallClick")=__('Uninstall')
      div#download-plugins
        form
          ul#plugin-browse-list(data-role='listview', data-inset="true", data-bind="foreach: browsePlugins")
            li
              label
                h2
                  span.name(data-bind="text: name")
                  | 
                  span.version(data-bind="text: version")
                  | 
                  span.installed(data-bind="visible: installed()")=__('installed')
                  | 
                  span.loaded(data-bind="visible: loaded()")=__('loaded')
                  | 
                  span.activated(data-bind="visible: $data.activated()")=__('activated')
                  | 
                  span.compatibility-unknown(data-bind="visible: $data.isCompatible !== true")=__('compatibility unknown')
                //-p
                //-  a.homepage(data-role="none")
                p.description
                  span(data-bind="text: description")
                  | 
                  a(target="_blank" data-bind="attr: {href: 'https://pimatic.org/plugins/pimatic-'+$data.name}")=__('Show Readme')
                .buttons
                  a.ui-btn.ui-mini.ui-btn-inline.ui-icon-power.ui-btn-icon-left.install(data-bind="visible: !installed(), click: $root.onInstallClick")=__('Install')