{{#if this.showIntroText}}
  <div id="intro" class={{if this.showDetailsPane "with-details"}}>
    <h2>
      Welcome to the contribution dashboard of the
      <a href="https://kosmos.org" target="_blank" rel="noreferrer noopener">Kosmos</a> project!
    </h2>
    <p>
      If you want to learn more about what the numbers mean and how this works,
      check out the
      <a href="https://wiki.kosmos.org/Kredits" target="_blank" rel="noreferrer noopener">Kredits documentation</a>.
      If you want to start earning kredits for your contributions,
      <LinkTo @route="signup">create a contributor profile</LinkTo>.
    </p>
  </div>
{{/if}}

<main id="dashboard" class={{if this.showDetailsPane "with-details"}}>

  <div id="stats">
    <section id="people">
      <header class="with-nav">
        <h2>Contributors</h2>
        {{#if this.kredits.hasAccounts}}
          <nav>
            <LinkTo @route="contributors.new" @title="Add contributor profile" class="button small green">add</LinkTo>
          </nav>
        {{/if}}
      </header>
      <div class="content">
        <ContributorList @contributorList={{this.kreditsToplist}}
                         @showUnconfirmedKredits={{this.showUnconfirmedKredits}}
                         @selectedContributorId={{this.selectedContributorId}}
                         @loading={{this.kredits.syncContributors.isRunning}} />

        <p class="stats">
          <span class="number">{{await this.kredits.totalKreditsEarned}}</span> kredits confirmed and issued to
          <span class="number">{{this.contributorsWithKredits.length}}</span> contributors
        </p>
        <p class="stats">
          <Input id="hide-unnconfirmed-kredits"
                 @type="checkbox"
                 @checked={{this.showUnconfirmedKredits}} />
          <label for="hide-unnconfirmed-kredits">Show unconfirmed kredits in toplist</label>
        </p>
      </div>
    </section>

    <section id="contributions-by-type">
      <header>
        <h2>Contributions by type</h2>
      </header>
      <div class="content">
        <ChartContributionsByType @contributions={{this.contributions}} />
      </div>
    </section>
  </div>

  <div id="contributions">
    {{#if this.contributionsUnconfirmed}}
      <section id="contributions-unconfirmed">
        <header class="with-nav">
          <h2>
            Latest Contributions
          </h2>
          <nav>
            <button type="button"
                    onclick={{action "toggleQuickFilterUnconfirmed"}}
                    class="small {{if this.showQuickFilterUnconfirmed "active"}}">
              filter
            </button>
            {{#if this.kredits.hasAccounts}}
              <LinkTo @route="contributions.new"
                      @title="Submit a contribution"
                      class="button small green">add</LinkTo>
            {{/if}}
          </nav>
        </header>
        <div class="content">
          {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
          <ContributionList @contributions={{this.contributionsUnconfirmedSorted}}
                            @vetoContribution={{action "vetoContribution"}}
                            @contractInteractionEnabled={{this.kredits.hasAccounts}}
                            @selectedContributionId={{this.selectedContributionId}}
                            @showQuickFilter={{this.showQuickFilterUnconfirmed}}
                            @loading={{this.kredits.syncContributions.isRunning}}/>
        </div>
      </section>
    {{/if}}

    <section id="contributions-confirmed">
      <header class="with-nav">
        <h2>Confirmed Contributions</h2>
        <nav>
          <button type="button"
                  onclick={{action "toggleQuickFilterConfirmed"}}
                  class="small {{if this.showQuickFilterConfirmed "active"}}">
            filter
          </button>
        </nav>
      </header>
      <div class="content">
        <ContributionList @contributions={{this.contributionsConfirmedSorted}}
                          @vetoContribution={{action "vetoContribution"}}
                          @selectedContributionId={{this.selectedContributionId}}
                          @showQuickFilter={{this.showQuickFilterConfirmed}} />
      </div>
    </section>

    {{#if this.showFullContributionSync}}
    <section id="sync-all-contributions">
      {{#if this.kredits.fetchMissingContributions.isIdle}}
        <p class="mb-4">
          There are
          <strong>{{this.kredits.missingHistoricContributionsCount}}</strong>
          earlier contributions, which are not currently loaded/displayed.
        </p>
        <p>
          You can fetch all historic data in one go, and have it stored locally in
          your browser:
          <button type="button" {{on "click" (perform this.kredits.fetchMissingContributions)}} class="small">
            fetch all data
          </button>
        </p>
      {{else}}
        <p class="mb-4">
          Syncing data. Please be patient...
        </p>
        <p>
          (You can leave this website anytime and sync missing data when you come back.)
        </p>
      {{/if}}
    </section>
    {{/if}}
  </div>

  <div id="details">
    {{outlet}}
  </div>

</main>