{{#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,
      {{link-to "create a contributor profile" "signup"}}.
    </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>
            {{link-to "add" "contributors.new" title="Add contributor profile" class="button small green"}}
          </nav>
        {{/if}}
      </header>
      <div class="content">
        {{contributor-list 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">
        {{chart-contributions-by-type 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}}
              {{link-to "add" "contributions.new" title="Submit a contribution" class="button small green"}}
            {{/if}}
          </nav>
        </header>
        <div class="content">
          {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
          {{contribution-list 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">
        {{contribution-list contributions=contributionsConfirmedSorted
                            vetoContribution=(action "vetoContribution")
                            selectedContributionId=selectedContributionId
                            showQuickFilter=showQuickFilterConfirmed}}
      </div>
    </section>
  </div>

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

</main>