{{#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">
            <svg x="0px" y="0px" viewBox="1 1 17 17" xml:space="preserve">
              <g id="Trigger">
                <path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
                  c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1
                  S6.1,4.9,9,4.9c2.7,0,4.9,2.1,5.1,4.7l-1.7-1.1c-0.3-0.2-0.7-0.1-0.9,0.2s-0.1,0.7,0.2,0.9l2.8,1.8c0,0,0,0,0,0
                  c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1l2-2.4C17.6,8.5,17.5,8.1,17.2,7.9z"/>
              </g>
            </svg>
          </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}}