{{#if showIntroText}}
  <div id="intro" class={{if showDetailsPane "with-details"}}>
    <h2>
      Welcome to the contribution dashboard of the
      <a href="https://kosmos.org" target="_blank" rel="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="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 showDetailsPane "with-details"}}>

  <div id="stats">
    <section id="people">
      <header class="with-nav">
        <h2>Contributors</h2>
        {{#if 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={{kreditsToplist}} @showUnconfirmedKredits={{showUnconfirmedKredits}} @selectedContributorId={{selectedContributorId}} />

        <p class="stats">
          <span class="number">{{await kredits.totalKreditsEarned}}</span> kredits confirmed and issued to
          <span class="number">{{contributorsWithKredits.length}}</span> contributors
        </p>
        <p class="stats">
          <Input @type="checkbox" @id="hide-unnconfirmed-kredits" @checked={{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={{contributions}} />
      </div>
    </section>
  </div>

  <div id="contributions">
    {{#if contributionsUnconfirmed}}
      <section id="contributions-unconfirmed">
        <header class="with-nav">
          <h2>Latest Contributions</h2>
          <nav>
            <button {{action "toggleQuickFilterUnconfirmed"}} class="small {{if showQuickFilterUnconfirmed "active"}}">filter</button>
            {{#if 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={{contributionsUnconfirmedSorted}} @vetoContribution={{action "vetoContribution"}} @contractInteractionEnabled={{kredits.hasAccounts}} @selectedContributionId={{selectedContributionId}} @showQuickFilter={{showQuickFilterUnconfirmed}} />
        </div>
      </section>
    {{/if}}

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

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

</main>