extends layout

block content
  include ./includes/common.pug
  if show_dist == true
    script.
      $(document).ready(function() {
        var data = [
          ['Top 1-25', !{dista.percent}],['Top 26-50', !{distb.percent}],['Top 51-75', !{distc.percent}],['Top 76-100', !{distd.percent}],['101+', !{diste.percent}]
        ];
        $.jqplot('pieChart', [data],
          {
            seriesColors: [ "#d9534f", "#5cb85c", "#428bca", "#222", "#CCC"],
            series: [{
              renderer: $.jqplot.PieRenderer,
              rendererOptions: {
                diameter: 260,
                padding: 0,
                sliceMargin: 4,
                showDataLabels: false
              }
            }],
            grid: {borderWidth:0, shadow:false},
            legend: {
              show: false,
              rendererOptions: {
                numberRows: 1,
                border: 'none'
              },
              location: 's'
            }
          }
        );
      });
  .row(style='margin-left:0;margin-right:0;')
    div(class=(show_dist == true ? 'col-xs-12 col-lg-8' : 'col-12'))
      .container
        if settings.richlist_page.show_last_updated == true
          div.font-weight-bold(style='margin-bottom:15px;') Top 100 data last updated:
            span.font-weight-normal=(last_updated == null || last_updated == '0' ? ' N/A' : ' ' + format_unixtime(last_updated))
        ul.nav.nav-tabs(role='tablist')
          li.nav-item(role='presentation')
            a.nav-link.active(href='#balance', aria-controls='balance', role='tab', data-toggle='tab') #{settings.locale.rl_current_balance}
          li.nav-item(role='presentation')
            a.nav-link(href='#received', aria-controls='received', role='tab', data-toggle='tab') #{settings.locale.rl_received_coins}
      .tab-content
        #balance.container.tab-pane.active(style='margin-top:0;')
          include ./includes/rl_balance.pug
        #received.container.tab-pane(style='margin-top:0;')
          include ./includes/rl_received.pug
    if show_dist == true
      .col-xs-12.col-lg-4
        #summary-panel.card.card-default.border-0(style='margin-top:34px;')
          .card-header
            strong #{settings.locale.rl_wealth}
          table.table.table-hover.table-bordered.summary-table.right-border-0(style='margin-bottom:0;')
            - var theadClasses = [];
            if settings.display.table_header_bgcolor != null && settings.display.table_header_bgcolor != ''
              - theadClasses.push('thead-' + settings.display.table_header_bgcolor);
            thead(class=theadClasses)
              tr
                th
                th.text-center Amount
                  span.small  (#{settings.symbol})
                th.text-center %
            tbody
              tr
                td.font-weight-bold
                  div.float-left(style='background-color:#d9534f;width:20px;height:20px;margin-right:6px;')
                  span #{settings.locale.rl_top25}
                - var total = Number(dista.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
                - var totalParts = total.split(".");
                - var percent = parseFloat(dista.percent).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':2,'useGrouping':false});
                - var percentParts = percent.split(".");
                td.text-center.breakWord #{totalParts[0]}.
                  span.decimal.breakWord #{totalParts[1]}
                td.text-center #{percentParts[0]}.
                  span.decimal #{percentParts[1]}
              tr
                td.font-weight-bold
                  div.float-left(style='background-color:#5cb85c;width:20px;height:20px;margin-right:6px;')
                  span #{settings.locale.rl_top50}
                - var total = Number(distb.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
                - var totalParts = total.split(".");
                - var percent = parseFloat(distb.percent).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':2,'useGrouping':false});
                - var percentParts = percent.split(".");
                td.text-center.breakWord #{totalParts[0]}.
                  span.decimal.breakWord #{totalParts[1]}
                td.text-center #{percentParts[0]}.
                  span.decimal #{percentParts[1]}
              tr
                td.font-weight-bold
                  div.float-left(style='background-color:#428bca;width:20px;height:20px;margin-right:6px;')
                  span #{settings.locale.rl_top75}
                - var total = Number(distc.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
                - var totalParts = total.split(".");
                - var percent = parseFloat(distc.percent).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':2,'useGrouping':false});
                - var percentParts = percent.split(".");
                td.text-center.breakWord #{totalParts[0]}.
                  span.decimal.breakWord #{totalParts[1]}
                td.text-center #{percentParts[0]}.
                  span.decimal #{percentParts[1]}
              tr
                td.font-weight-bold
                  div.float-left(style='background-color:#222;width:20px;height:20px;margin-right:6px;')
                  span #{settings.locale.rl_top100}
                - var total = Number(distd.total).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
                - var totalParts = total.split(".");
                - var percent = parseFloat(distd.percent).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':2,'useGrouping':false});
                - var percentParts = percent.split(".");
                td.text-center.breakWord #{totalParts[0]}.
                  span.decimal.breakWord #{totalParts[1]}
                td.text-center #{percentParts[0]}.
                  span.decimal #{percentParts[1]}
              tr
                td.font-weight-bold
                  span #{settings.locale.total}
                - var total = Number(parseFloat(dista.total) + parseFloat(distb.total) + parseFloat(distc.total) + parseFloat(distd.total)).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':8,'useGrouping':true});
                - var totalParts = total.split(".");
                - var percent = (parseFloat(dista.percent)+parseFloat(distb.percent)+parseFloat(distc.percent)+parseFloat(distd.percent)).toLocaleString('en',{'minimumFractionDigits':2,'maximumFractionDigits':2,'useGrouping':false});
                - var percentParts = percent.split(".");
                td.text-center.font-weight-bold.breakWord #{totalParts[0]}.
                  span.decimal.breakWord #{totalParts[1]}
                td.font-weight-bold.text-center #{percentParts[0]}.
                  span.decimal #{percentParts[1]}
        div#pieChart(style="width:300px;height:305px;margin:0 auto;")