{{#if allHooks.isLoaded}}

  <header>
  {{#if config.billingEndpoint}}
    <div class="cta-btn">
    {{#if view.subscribed}}
      <a class="btn btn-activated" href={{billingUrl}}>
        Subscription active!
      </a>
    {{else}}
      {{#if view.education}}
        <a class="btn btn-activated" href={{billingUrl}}>
          Educational account!
        </a>
      {{else}}
        <a class="btn btn-activate" href={{billingUrl}}>
          Sign up this account!
        </a>
      {{/if}}
    {{/if}}
    </div>
  {{/if}}

    <div class="profile-header">
      <h1>{{accountName}}</h1>
    </div>

    {{#if user.isSyncing}}
      <div class="sync-button">
        <button class="button is-syncing">
          <span class="loading-indicator--white"><i></i><i></i><i></i></span>Syncing from GitHub
        </button>
      </div>
    {{else}}
      <div class="sync-button">
        <button {{action 'sync'}} class="button">
          <span class="icon icon-sync"></span>Sync
        </button>
        <p class="sync-last">last synced {{format-time user.syncedAt}}</p>
      </div>
      {{#if config.pro}}
        <p>We're only showing your private repositories. You can find your public projects on <a href="https://travis-ci.org" title="travis-ci.org">travis-ci.org</a>.</p>
        {{else}}
        <p>We're only showing your public repositories. You can find your private projects on <a href="https://travis-ci.com" title="travis-ci.com">travis-ci.com</a>.</p>
      {{/if}}
    {{/if}}

  </header>

  <section class="profile-getstarted">
    {{!-- <a href="#" class="dismiss"><span class="icon icon--dismiss-grey"></span></a> --}}
    <ol class="row">
      <li class="columns medium-4">
        <figure>
          <img src="/images/svg/hooks-step-1-01.svg" alt="">
          <figcaption>Flick the repository switch on</figcaption>
        </figure>
      </li>
      <li class="columns medium-4">
        <figure>
          <img src="/images/svg/hooks-step-2-01.svg" alt="">
          <figcaption>Add .travis.yml file to your repository</figcaption>
        </figure>
      </li>
      <li class="columns medium-4">
        <figure>
          <img src="/images/svg/hooks-step-3-01.svg" alt="">
          <figcaption>Trigger your first build with a git push</figcaption>
        </figure>
      </li>
    </ol>
  </section>

  <div>
    <ul class="profile-hooklist">
      {{#each hooks as |hook|}}
        {{hooks-list-item hook=hook}}
      {{else}}
        <li>
          {{#if hooksWithoutAdmin.length}}
            Sorry, but we can't find any repositories you have admin access to.
          {{else}}
            Sorry, it seems like we couldn't find any repositories you have access to on GitHub.
          {{/if}}
        </li>
      {{/each}}
    </ul>
  </div>

  {{#if hooksWithoutAdmin.length}}
    <div id="unadministerable-hooks">
      <p>You require admin rights to enable these repositories</p>

      <ul class="profile-hooklist">
        {{#each hooksWithoutAdmin as |hook| }}
          <li class="{{if hook.active 'active'}} row">
            <div class="switch--icon inline-block disabled {{if hook.active 'active'}}">
              <div class="switch-inner">
                <span class="on">
                  ON
                </span>
                <span class="off">
                  OFF
                </span>
              </div>
            </div>
            <a href={{hook.urlGithub}} rel="nofollow" class="profile-repo">
              {{hook.slug}}
              <span>{{hook.description}}</span>
            </a>
          </li>
        {{/each}}
      </ul>
    </div>
  {{/if}}

{{else}}
  {{loading-indicator}}
{{/if}}


