hummingbird-me/kitsu-web

<div class="export-container settings-container">
  <header>
    <h1>{{t "settings.exports.header"}}</h1>
    <div class="settings--section-head">
      {{t "settings.exports.sub-header"}}
    </div>

    <div class="container">
      <div class="form-group row">
        {{#if model.taskInstance.isRunning}}
          <div class="text-xs-center w-100 m-t-1 m-b-1">
            {{loading-spinner size="large"}}
            <p>{{t "settings.exports.loading"}}</p>
          </div>
        {{else if model.taskInstance.error}}
          <div class="text-xs-center w-100 m-t-1 m-b-1">
            {{t "errors.load"}}
          </div>
        {{else if account}}
          <div class="mal-connected">
            <span class="avatar-placeholder">
              <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
                <path d="M 12 9 C 6.295 9 0.88425 10.9785 0.65625 11.0625 C 0.26425 11.2075 0 11.582 0 12 L 0 13.5 C 0 13.879 0.2235 14.23725 0.5625 14.40625 L 1 14.625 C 1.231 21.763 5.45725 26 12.40625 26 C 18.83525 26 23 21.682 23 15 L 23 12.53125 C 23.404 12.30425 24.117 12 25 12 C 25.878 12 26.594 12.30325 27 12.53125 L 27 15 C 27 21.682 31.16475 26 37.59375 26 C 44.54275 26 48.769 21.762 49 14.625 L 49.4375 14.40625 C 49.7765 14.23625 50 13.879 50 13.5 L 50 12 C 50 11.582 49.73575 11.2075 49.34375 11.0625 C 49.11575 10.9785 43.705 9 38 9 C 33.316 9 29.45575 10.337 28.09375 10.875 C 27.48175 10.512 26.392 10 25 10 C 23.608 10 22.487 10.512 21.875 10.875 C 20.515 10.337 16.684 9 12 9 z M 22 28 C 19.505 28 18.4775 30.00425 17.5625 31.78125 C 16.5335 33.77725 15.771 35 14 35 C 12.738 35 11.865 34.6885 11.375 34.0625 C 10.545 33.0045 10.9345 31.29425 10.9375 31.28125 C 11.0415 30.87525 10.87625 30.4245 10.53125 30.1875 C 10.18525 29.9485 9.74925 29.97675 9.40625 30.21875 C 9.30825 30.28775 7 31.928 7 34.5 C 7 36.914 8.78825 41 15.53125 41 C 19.67525 41 23.053 39.243 25 37.5 C 26.947 39.243 30.32475 41 34.46875 41 C 41.21175 41 43 36.914 43 34.5 C 43 31.928 40.69075 30.28675 40.59375 30.21875 C 40.25175 29.97675 39.81475 29.9495 39.46875 30.1875 C 39.12475 30.4245 38.9585 30.87525 39.0625 31.28125 C 39.0665 31.29725 39.47625 33.0045 38.65625 34.0625 C 38.16625 34.6925 37.266 35 36 35 C 34.229 35 33.4665 33.77725 32.4375 31.78125 C 31.5215 30.00425 30.494 28 28 28 C 26.776 28 25.651 28.49275 25 28.84375 C 24.347 28.49575 23.208 28 22 28 z"></path>
              </svg>
            </span>
            <a href="https://myanimelist.net/profile/{{account.externalUserId}}" class="connected-user">{{account.externalUserId}}</a>
            <span class="export-remove">
              <a class="hint--left hint--bounce hint--rounded" aria-label={{t "settings.exports.remove"}} {{action (route-action "deleteAccount" account)}}>
                {{svg-jar "cancel"}}
              </a>
            </span>
          </div>
          {{#if account.disabledReason}}
            <div class="alert alert-danger m-t-1" role="alert">
              <p>{{t "settings.exports.disabled" reason=account.disabledReason htmlSafe=true}}</p>
            </div>
          {{/if}}
        {{else}}
        <!--
          <button class="import-option" onclick={{toggle-action "exportModal" this}}>
            <span class="import-logo">
              <img src="/images/mal.png">
            </span>
            <span class="import-title">{{t "settings.exports.create"}}</span>
          </button>
        -->
        {{/if}}

        {{#if exportModal}}
          {{to-elsewhere named="modal" send=(component "modals/progressing-modal"
            modalId="export-modal"
            modalBase="settings/export"
            component="export-basicauth"
            componentData=(hash
              siteName="MyAnimeList"
              refresh=(route-action "refresh")
            )
            onClose=(toggle-action "exportModal" this))
          }}
        {{/if}}

        {{#if (has-feature "xml_download")}}
          <a class="import-option" target="_blank" href={{animeDownloadUrl}}>
            <span class="import-title">{{t "settings.exports.download" kind="Anime"}}</span>
          </a>
          <a class="import-option" target="_blank" href={{mangaDownloadUrl}}>
            <span class="import-title">{{t "settings.exports.download" kind="Manga"}}</span>
          </a>
        {{/if}}
      </div>
    </div>
  </header>

  {{#if account}}
    <div class="settings--section-head">
      {{t "settings.exports.recent"}}
    </div>
    <div class="export-c container">
      <div class="form-group">
        {{settings/export/export-logs account=account}}
      </div>
    </div>
  {{/if}}
</div>