extends layout

block content
  script.
    $(document).ready(function() {
      if ('#{settings.richlist_page.page_header.show_last_updated}' == 'true') {
        const lastUpdatedDate = #{(last_updated == null || last_updated == '0' ? 0 : last_updated)};

        if (lastUpdatedDate != 0) {
          $('span#lastUpdatedDate').html(' ' + format_unixtime(lastUpdatedDate));

          if (#{settings.shared_pages.date_time.enable_alt_timezone_tooltips} == true) {
            $('span#lastUpdatedDate').attr('data-bs-toggle', 'tooltip').attr('data-bs-placement', 'auto').attr('title', format_unixtime(lastUpdatedDate, true));
            enableTooltips();
          }
        } else
          $('span#lastUpdatedDate').html(' N/A');
      }
      if (#{settings.shared_pages.page_header.page_title_image.enable_animation} == true && #{settings.richlist_page.page_header.show_img} == true)
        startRotateElement('img#header-img');
    });
  if settings.richlist_page.wealth_distribution.show_distribution_chart == true
    script.
      $(document).ready(function() {
        let xValues = ['Top 1-25', 'Top 26-50', 'Top 51-75', 'Top 76-100', '101+'];
        let yValues = ['!{dista.total}', '!{distb.total}', '!{distc.total}', '!{distd.total}', '!{diste.total}'];
        let totals = ['!{dista.totalFixed}', '!{distb.totalFixed}', '!{distc.totalFixed}', '!{distd.totalFixed}', '!{diste.totalFixed}'];
        let percentages = ['!{dista.percentFixed}', '!{distb.percentFixed}', '!{distc.percentFixed}', '!{distd.percentFixed}', '!{diste.percentFixed}'];
        const burned = !{JSON.stringify(burned)};

        if ('#{settings.richlist_page.burned_coins.include_burned_coins_in_distribution}' == 'true' && burned != null && burned != '' && burned.total != null && parseFloat(burned.total) > 0) {
          xValues.push('Burned Coins');
          yValues.push(burned.total);
          totals.push(burned.totalFixed);
          percentages.push(burned.percentFixed);
        }

        new Chart("pieChart", {
          type: "pie",
          data: {
            labels: xValues,
            datasets: [{
              backgroundColor: !{JSON.stringify(settings.richlist_page.wealth_distribution.colors)},
              data: yValues
            }]
          },
          options: {
            responsive: true,
            plugins: {
              legend: {
                display: false
              },
              tooltip: {
                callbacks: {
                  label: function(context) {
                    return `${totals[xValues.indexOf(context.label)]} (${percentages[xValues.indexOf(context.label)]}%)`;
                  }
                }
              }
            }
          }
        });
      });
  - var theadClasses = [];
  if settings.shared_pages.table_header_bgcolor != null && settings.shared_pages.table_header_bgcolor != ''
    - theadClasses.push('table-' + settings.shared_pages.table_header_bgcolor);
  if settings.richlist_page.page_header.show_img == true || settings.richlist_page.page_header.show_title == true || settings.richlist_page.page_header.show_last_updated == true || settings.richlist_page.page_header.show_description == true
    .row(style='margin: 0 0 5px 0;')
      div(class=(settings.richlist_page.wealth_distribution.show_distribution_table == true || settings.richlist_page.wealth_distribution.show_distribution_chart == true ? 'col-xs-12' : 'col-12'))
        .container
          #page-header-container(style='align-items:' + (settings.richlist_page.page_header.show_img == true && settings.richlist_page.page_header.show_title == true && settings.richlist_page.page_header.show_last_updated == true && settings.richlist_page.page_header.show_description == true ? 'flex-start' : 'center'))
            if settings.richlist_page.page_header.show_img == true
              #header-img-container
                img#header-img(src=(settings.shared_pages.page_header.page_title_image == null || settings.shared_pages.page_header.page_title_image.image_path == null || settings.shared_pages.page_header.page_title_image.image_path == '' ? '/img/page-title-img.png' : settings.shared_pages.page_header.page_title_image.image_path))
            #page-title-container
              if settings.richlist_page.page_header.show_title == true
                h3#page-title #{settings.localization.rl_title.replace('{1}', settings.coin.name)}
              if settings.richlist_page.page_header.show_last_updated == true
                if settings.richlist_page.page_header.show_title != true && settings.richlist_page.page_header.show_description != true
                  #page-title-container
                    .sub-page-header
                      span.fw-bold=settings.localization.last_updated + ':'
                      span.text-muted#lastUpdatedDate
                else
                  .sub-page-header(style='margin-bottom:' + (settings.richlist_page.page_header.show_description == true ? '5' : '0') + 'px')
                    span.fw-bold=settings.localization.last_updated + ':'
                    span.text-muted#lastUpdatedDate
              if settings.richlist_page.page_header.show_description == true
                if settings.richlist_page.page_header.show_title != true && settings.richlist_page.page_header.show_last_updated != true
                  #page-title-container
                    .sub-page-header.text-muted=settings.localization.rl_description.replace('{1}', settings.coin.name)
                else
                  .sub-page-header.text-muted=settings.localization.rl_description.replace('{1}', settings.coin.name)
          .cardSpacer.clearfix
  .row(style='margin-left:0;margin-right:0;')
    if settings.richlist_page.show_current_balance == true || settings.richlist_page.show_received_coins == true
      div(class=(settings.richlist_page.wealth_distribution.show_distribution_table == true || settings.richlist_page.wealth_distribution.show_distribution_chart == true ? 'col-xs-12 col-lg-8' : 'col-12'))
        .container
          ul.nav.nav-tabs(role='tablist')
            if settings.richlist_page.show_current_balance == true
              li.nav-item(role='presentation')
                a(class='nav-link' + (settings.richlist_page.show_current_balance == true ? ' active' : ''), href='#balance', aria-controls='balance', role='tab', data-bs-toggle='tab') #{settings.localization.rl_current_balance}
            if settings.richlist_page.show_received_coins == true
              li.nav-item(role='presentation')
                a(class='nav-link' + (!settings.richlist_page.show_current_balance ? ' active' : ''), href='#received', aria-controls='received', role='tab', data-bs-toggle='tab') #{settings.localization.rl_received_coins}
        .tab-content
          if settings.richlist_page.show_current_balance == true
            #balance(class='container tab-pane' + (settings.richlist_page.show_current_balance == true ? ' active' : ''), style='margin-top:0;')
              .card.card-default.border-0
                table.table.table-hover.table-bordered.table-striped.summary-table.right-border-0(style='margin-bottom:0;', cellspacing='0')
                  thead
                    tr(class=theadClasses)
                      th.text-center
                        span.fa-solid.fa-flag-checkered
                      th #{settings.localization.tx_address}
                      th.text-center #{settings.localization.rl_balance}
                        span.small.fw-normal  (#{settings.coin.symbol})
                      th.text-center %
                  tbody
                    - let count = 0;
                    each address in balance
                      - count++;
                      - const itemFixedParts = address.balanceFixed.split('.');
                      - const percentParts = address.percentFixed.split('.');
                      tr
                        td.text-center
                          =count
                        td
                          if settings.claim_address_page.enabled == false || address.claim_name == null || address.claim_name == ''
                            a.breakWord(href='/address/' + address.a_id) #{address.a_id}
                          else
                            a.breakWord(href='/address/' + address.a_id) #{address.claim_name}
                          include ./includes/rl_labels.pug
                        td.text-center #{itemFixedParts[0]}.
                          span.decimal #{itemFixedParts[1]}
                        td.text-center #{percentParts[0]}.
                          span.decimal #{percentParts[1]}
          if settings.richlist_page.show_received_coins == true
            #received(class='container tab-pane' + (!settings.richlist_page.show_current_balance ? ' active' : ''), style='margin-top:0;')
              .card.card-default.border-0
                table.table.table-hover.table-bordered.table-striped.summary-table.right-border-0(style='margin-bottom:0;', cellspacing='0')
                  thead
                    tr(class=theadClasses)
                      th.text-center
                        span.fa-solid.fa-flag-checkered
                      th #{settings.localization.tx_address}
                      th.text-center #{settings.localization.rl_received}
                        span.small.fw-normal  (#{settings.coin.symbol})
                  tbody
                    - let count = 0;
                    each address in received
                      - count++;
                      - const itemFixedParts = address.receivedFixed.split('.');
                      tr
                        td.text-center
                          =count
                        td
                          if settings.claim_address_page.enabled == false || address.claim_name == null || address.claim_name == ''
                            a.breakWord(href='/address/' + address.a_id) #{address.a_id}
                          else
                            a.breakWord(href='/address/' + address.a_id) #{address.claim_name}
                          include ./includes/rl_labels.pug
                        td.text-center #{itemFixedParts[0]}.
                          span.decimal #{itemFixedParts[1]}
    if settings.richlist_page.wealth_distribution.show_distribution_table == true || settings.richlist_page.wealth_distribution.show_distribution_chart == true
      div(class=(settings.richlist_page.show_received_coins == true || settings.richlist_page.show_current_balance == true ? 'col-xs-12 col-lg-4' : 'col-12'))
        if settings.richlist_page.wealth_distribution.show_distribution_table == true
          #summary-panel.card.card-default.border-0(style='margin-top:' + (settings.richlist_page.show_current_balance == true || settings.richlist_page.show_received_coins == true ? '34' : '0') + 'px;')
            .card-header
              strong #{settings.localization.rl_wealth}
            table.table.table-hover.table-bordered.summary-table.right-border-0(style='margin-bottom:0;')
              thead
                tr(class=theadClasses)
                  th
                  th.text-center Amount
                    span.small.fw-normal  (#{settings.coin.symbol})
                  th.text-center %
              tbody
                tr
                  td.fw-bold
                    div.float-start.wealth-dist-color-box(style=('background-color:' + settings.richlist_page.wealth_distribution.colors[0] + ';'))
                    span #{settings.localization.rl_top25}
                  - var totalParts = dista.totalFixed.split('.');
                  - var percentParts = dista.percentFixed.split('.');
                  td.text-center.breakWord #{totalParts[0]}.
                    span.decimal.breakWord #{totalParts[1]}
                  td.text-center #{percentParts[0]}.
                    span.decimal #{percentParts[1]}
                tr
                  td.fw-bold
                    div.float-start.wealth-dist-color-box(style=('background-color:' + settings.richlist_page.wealth_distribution.colors[1] + ';'))
                    span #{settings.localization.rl_top50}
                  - var totalParts = distb.totalFixed.split('.');
                  - var percentParts = distb.percentFixed.split('.');
                  td.text-center.breakWord #{totalParts[0]}.
                    span.decimal.breakWord #{totalParts[1]}
                  td.text-center #{percentParts[0]}.
                    span.decimal #{percentParts[1]}
                tr
                  td.fw-bold
                    div.float-start.wealth-dist-color-box(style=('background-color:' + settings.richlist_page.wealth_distribution.colors[2] + ';'))
                    span #{settings.localization.rl_top75}
                  - var totalParts = distc.totalFixed.split('.');
                  - var percentParts = distc.percentFixed.split('.');
                  td.text-center.breakWord #{totalParts[0]}.
                    span.decimal.breakWord #{totalParts[1]}
                  td.text-center #{percentParts[0]}.
                    span.decimal #{percentParts[1]}
                tr
                  td.fw-bold
                    div.float-start.wealth-dist-color-box(style=('background-color:' + settings.richlist_page.wealth_distribution.colors[3] + ';'))
                    span #{settings.localization.rl_top100}
                  - var totalParts = distd.totalFixed.split('.');
                  - var percentParts = distd.percentFixed.split('.');
                  td.text-center.breakWord #{totalParts[0]}.
                    span.decimal.breakWord #{totalParts[1]}
                  td.text-center #{percentParts[0]}.
                    span.decimal #{percentParts[1]}
                tr.text-end
                  td.fw-bold
                    span #{settings.localization.total_top_100}
                  - var totalParts = distsubtotal.totalFixed.split('.');
                  - var percentParts = distsubtotal.percentFixed.split('.');
                  td.text-center.fw-bold.breakWord #{totalParts[0]}.
                    span.decimal.breakWord #{totalParts[1]}
                  td.fw-bold.text-center #{percentParts[0]}.
                    span.decimal #{percentParts[1]}
                tr
                  td.fw-bold
                    div.float-start.wealth-dist-color-box(style=('background-color:' + settings.richlist_page.wealth_distribution.colors[4] + ';'))
                    span 101+
                  - var totalParts = diste.totalFixed.split('.');
                  - var percentParts = diste.percentFixed.split('.');
                  td.text-center.breakWord #{totalParts[0]}.
                    span.decimal.breakWord #{totalParts[1]}
                  td.text-center #{percentParts[0]}.
                    span.decimal #{percentParts[1]}
                if settings.richlist_page.burned_coins.include_burned_coins_in_distribution == true && burned != null && parseFloat(burned.total) > 0
                  tr
                    td.fw-bold
                      div.float-start.wealth-dist-color-box(style=('background-color:' + settings.richlist_page.wealth_distribution.colors[5] + ';'))
                      span Burned Coins
                    - var totalParts = burned.totalFixed.split('.');
                    - var percentParts = burned.percentFixed.split('.');
                    td.text-center.breakWord #{totalParts[0]}.
                      span.decimal.breakWord #{totalParts[1]}
                    td.text-center #{percentParts[0]}.
                      span.decimal #{percentParts[1]}
                tr.text-end
                  td.fw-bold
                    span #{settings.localization.total}
                  - var totalParts = disttotal.totalFixed.split('.');
                  - var percentParts = disttotal.percentFixed.split('.');
                  td.text-center.fw-bold.breakWord #{totalParts[0]}.
                    span.decimal.breakWord #{totalParts[1]}
                  td.fw-bold.text-center #{percentParts[0]}.
                    span.decimal #{percentParts[1]}
                if settings.richlist_page.wealth_distribution.show_address_count == true
                  tr.text-end
                    td.fw-bold
                      span Total Wallet Addresses
                    td.text-center.breakWord(colspan='2')
                      span #{address_count}
        if settings.richlist_page.wealth_distribution.show_distribution_chart == true
          canvas#pieChart(style="margin-top:10px;max-height:305px;")