<div class="row py-5">
  <div class="col-md-11 mx-auto">

    {{#if beginner}}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      You don't have any {{activeDashboard}} records in this month yet. Try to <a href="/records/new?type=expense&ledger={{activeDashboard}}">add expense</a> or
      <a href="/records/new?type=revenue&ledger={{activeDashboard}}">add revenue</a> now or choose another month to filter!
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    {{/if}}

    {{#if noFilterResult}}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      No {{activeDashboard}} result found for the selected {{selectedDate}} {{selectedCategory}}. Try to use other month or category filter.
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    {{/if}}

    {{!-- ========== OVERVIEW STRIP ========== --}}
    <div class="row text-center my-3">
      <div class="col-md-3 col-6 mb-3">
        <div class="card h-100 overview-card">
          <div class="card-body py-3">
            <div class="overview-label">Personal Balance</div>
            <div class="overview-amount" style="color: #1C2B4A;">{{personalBalance}}</div>
          </div>
        </div>
      </div>
      <div class="col-md-3 col-6 mb-3">
        <div class="card h-100 overview-card" style="position: relative;">
          <div class="card-body py-3">
            <div class="overview-label">Business Net (P&L)</div>
            <div class="overview-amount" style="color: #8B2E1F;">{{businessNet}}</div>
          </div>
          <span class="paw-print"><i class="fas fa-paw"></i></span>
        </div>
      </div>
      <div class="col-md-3 col-6 mb-3">
        <div class="card h-100 overview-card" style="position: relative;">
          <div class="card-body py-3">
            <div class="overview-label">Business Cash Balance</div>
            <div class="overview-amount" style="color: #8B2E1F;">{{businessCashBalance}}</div>
          </div>
          <span class="paw-print"><i class="fas fa-paw"></i></span>
        </div>
      </div>
      <div class="col-md-3 col-6 mb-3">
        <div class="card h-100 overview-card">
          <div class="card-body py-3">
            <div class="overview-label">Net Position</div>
            <div class="overview-amount" style="color: #3B6B4A;">{{netPosition}}</div>
          </div>
        </div>
      </div>
    </div>

    {{!-- ========== DASHBOARD TOGGLE ========== --}}
    <div class="d-flex justify-content-center mb-3">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link {{#if (eq activeDashboard 'Personal')}}active ink-personal-toggle{{/if}}"
             href="/?dashboard=Personal&date={{selectedDate}}&category={{selectedCategory}}">
            <i class="fas fa-user mr-1"></i> Personal
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link {{#if (eq activeDashboard 'Business')}}active ink-business-toggle{{/if}}"
             href="/?dashboard=Business&date={{selectedDate}}&category={{selectedCategory}}">
            <i class="fas fa-briefcase mr-1"></i> Business
          </a>
        </li>
      </ul>
    </div>

    {{!-- ========== FILTER FORM ========== --}}
    <form action="/" class="input-group row mb-3" onchange="submit();">
      <input type="hidden" name="dashboard" value="{{activeDashboard}}">
      <div class="col-sm-6 mb-2">
        <select class="custom-select" name="date">
          <option value="all">All Months</option>
          {{#each monthOfYearSet}}
          <option value="{{ this }}" {{#if (eq ../filterDate this)}}selected{{/if}}>{{ this }}</option>
          {{/each}}
        </select>
      </div>
      <div class="col-sm-6 mb-2">
        <select class="custom-select" name="category">
          <option value="">All Categories</option>
          {{#each categoryList}}
          <option value="{{ this.name }}" {{#if (eq ../selectedCategory this.name)}}selected{{/if}}>{{ this.name }}</option>
          {{/each}}
        </select>
      </div>
    </form>

    {{!-- ========== PERSONAL DASHBOARD CONTENT ========== --}}
    {{#if (eq activeDashboard 'Personal')}}

    {{!-- Personal Summary Row --}}
    <div class="row mb-4">
      <div class="col-4 text-center">
        <small class="text-muted">Expenses</small>
        <div style="font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: #D4725C;">{{personalExpense}}</div>
      </div>
      <div class="col-4 text-center">
        <small class="text-muted">Revenue</small>
        <div style="font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: #6BAA7E;">{{personalRevenue}}</div>
      </div>
      <div class="col-4 text-center">
        <small class="text-muted">Balance</small>
        <div style="font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: #F2EFE3;">{{personalBalance}}</div>
      </div>
    </div>
    <div class="row mb-4">
      <div class="col-6 text-center">
        <small class="text-muted">Must-Pay</small>
        <div style="font-weight: 500; font-family: 'IBM Plex Mono', monospace; color: #D4CFC0;">{{mustPayTotal}}</div>
      </div>
      <div class="col-6 text-center">
        <small class="text-muted">Discretionary</small>
        <div style="font-weight: 500; font-family: 'IBM Plex Mono', monospace; color: #D4CFC0;">{{discretionaryTotal}}</div>
      </div>
    </div>

    {{!-- Personal Charts --}}
    <div class="mt-4 mb-5 mx-2 row card">
      <div class="col-lg-7 d-flex flex-column justify-content-around">
        <div class="chart-category m-3">
          <div class="chart" style="max-width: 550px;margin: 0 auto; max-height: 100px;">
            <canvas id="myCategory" width="300" height="300"></canvas>
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="chart-container p-2" style="max-width: 350px; margin: 0 auto; position:relative;">
          <div class="pt-4">
            <div class="chart-name" style="position: absolute; top: 30px;">
              <h5 style="font-weight: 500;">{{#if (eq selectedDate 'all')}}Category{{else}}{{#if
                selectedCategory}}Category{{else}}Budget{{/if}}{{/if}}</h5>
            </div>
            {{#if (eq selectedDate 'all')}}
            <div class="pt-5">
              <canvas id="myChart" width="300" height="300"></canvas>
            </div>
            {{else}}
            {{#if selectedCategory}}
            <div class="pt-5">
              <canvas id="myChart" width="300" height="300"></canvas>
            </div>
            {{else}}
            <div class="p-4 pt-5">
              <canvas id="myBudget" width="200" height="200"></canvas>
            </div>
            <div class="budget-data-container d-flex justify-content-between">
              <div class="budget-container pe-2 pb-3 d-flex flex-column align-items-center">
                <h6 style="font-size: 1rem; font-weight: 600">Monthly Limit</h6>
                <div class="d-flex justify-content-center">
                  <div>
                    <span style="font-family: 'IBM Plex Mono', monospace;">{{formattedBudget}}</span>
                  </div>
                  <div class="d-flex align-items-center">
                    <button type="button" style="background: transparent;border: none;" data-toggle="modal"
                      data-target="#exampleModal">
                      <i class="fas fa-edit icon-edit" aria-hidden="true"></i>
                    </button>
                  </div>
                </div>
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                  aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Edit Monthly Budget</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <form action="/users/budget?_method=PUT" method="POST">
                          <div class="form-group">
                            <label for="budgetPersonal">Personal Budget</label>
                            <input type="number" class="form-control" name="budgetPersonal" value="{{budgetPersonal}}" min="1">
                          </div>
                          <div class="form-group">
                            <label for="budgetBusiness">Business Budget</label>
                            <input type="number" class="form-control" name="budgetBusiness" value="{{budgetBusiness}}" min="1">
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save changes</button>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="remaining-container px-2 pb-3 d-flex flex-column align-items-center">
                <h6 style="font-size: 1rem; font-weight: 600">Remaining</h6>
                <span style="font-family: 'IBM Plex Mono', monospace;">{{remaining}}</span>
              </div>
            </div>
            {{/if}}
            {{/if}}
          </div>
        </div>
      </div>
    </div>

    {{!-- Personal Record List --}}
    <div class="mx-2 mb-3 d-flex justify-content-between align-items-center">
      <small class="text-muted"><i class="fas fa-user mr-1"></i> Personal Records</small>
      <small style="font-weight:500; color: #A89E8E;">Found {{totalRecords}} records</small>
    </div>

    <div class="mx-2">
      {{#each records}}
      <div class="row flex-md-nowrap py-2 record" style="margin: 0;">
        <div class="col-2 d-flex justify-content-center align-items-center">
          <i class="{{ this.category.icon }} fa-2x record-icon" {{#if (eq this.type 'revenue' )}}style="color: #3B6B4A;"
            {{/if}}></i>
        </div>
        <div class="col-3 pl-3">
          <h5 class="record-name">{{ this.name }}</h5>
          <small>{{ this.date }}</small>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-end">
          <div class="d-flex flex-column align-items-end">
            <h5 class="record-amount">{{#if (eq this.type 'expense')}}-{{/if}}{{ this.amount }}</h5>
            <small class="text-muted">{{this.merchant}}</small>
          </div>
        </div>
        <div class="col-3 d-flex justify-content-center align-items-center">
          <a href="/records/{{ this.id }}/edit?type={{this.type}}&ledger={{../activeDashboard}}" class="mr-2"><i
              class="fas fa-edit icon-edit"></i></a>
          <form method="POST" action="/records/{{ this.id }}?_method=DELETE" class="record-delete"
            onsubmit="return checkDelete()" style="margin: 0;">
            <button type="submit" class="record-deleteBtn"><i class="fas fa-trash-alt icon-delete"></i></button>
          </form>
        </div>
      </div>
      {{/each}}
    </div>

    {{!-- Personal Pagination --}}
    {{#if records.length}}
    <div id="pagination" class="d-flex justify-content-center mt-4">
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item {{#if (eq pageNumber prev)}}disabled{{/if}}">
            <a class="page-link" href="/?page={{prev}}&date={{selectedDate}}&category={{selectedCategory}}&dashboard={{activeDashboard}}"
              aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          {{#each totalPage}}
          {{#if (eq this ../pageNumber)}}
          <li class="page-item active"><a class="page-link" href="#">{{this}}</a></li>
          {{else}}
          <li class="page-item"><a class="page-link"
              href="/?page={{this}}&date={{../selectedDate}}&category={{../selectedCategory}}&dashboard={{../activeDashboard}}">{{this}}</a></li>
          {{/if}}
          {{/each}}
          <li class="page-item {{#if (eq pageNumber next)}}disabled{{/if}}">
            <a class="page-link" href="/?page={{next}}&date={{selectedDate}}&category={{selectedCategory}}&dashboard={{activeDashboard}}"
              aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    {{/if}}

    {{!-- ========== PERSONAL MODULE SUMMARIES ========== --}}
    <div class="row mt-5 mb-4">
      {{!-- Goals --}}
      <div class="col-md-6 mb-4">
        <div class="card" style="position: relative;">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h5 style="font-weight: 600; color: #1C2B4A;"><i class="fas fa-bullseye mr-2"></i>Goals</h5>
              <a href="/goals" class="text-muted"><small>View All</small></a>
            </div>
            {{#if goals.length}}
            {{#each goals}}
            <div class="py-1" style="border-bottom: 1px solid #C4BFB0;">
              <div class="d-flex justify-content-between">
                <span style="font-weight: 500;">{{this.name}}</span>
                <small style="font-family: 'IBM Plex Mono', monospace;">{{this.formattedSaved}} / {{this.formattedTarget}}</small>
              </div>
              <div class="progress mt-1" style="height: 6px;">
                <div class="progress-bar {{#if (eq this.tier 'MustFund')}}bg-danger{{else if (eq this.tier 'ActivelySaving')}}bg-info{{else}}bg-secondary{{/if}}" role="progressbar" style="width: {{this.percent}}%"></div>
              </div>
            </div>
            {{/each}}
            {{else}}
            <p class="text-muted text-center py-2">No goals yet</p>
            {{/if}}
          </div>
        </div>
      </div>

      {{!-- Debts --}}
      <div class="col-md-6 mb-4">
        <div class="card" style="position: relative;">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h5 style="font-weight: 600; color: #1C2B4A;"><i class="fas fa-file-invoice-dollar mr-2"></i>Debts</h5>
              <a href="/debts" class="text-muted"><small>View All</small></a>
            </div>
            {{#if debts.length}}
            {{#each debts}}
            <div class="d-flex justify-content-between align-items-center py-1" style="border-bottom: 1px solid #C4BFB0;">
              <span style="font-weight: 500;">{{this.name}}</span>
              <span style="font-family: 'IBM Plex Mono', monospace;">{{this.formattedRemaining}} remaining</span>
            </div>
            {{/each}}
            {{else}}
            <p class="text-muted text-center py-2">No debts recorded</p>
            {{/if}}
          </div>
        </div>
      </div>
    </div>

    {{/if}}

    {{!-- ========== BUSINESS DASHBOARD CONTENT ========== --}}
    {{#if (eq activeDashboard 'Business')}}

    {{!-- Business Summary Row --}}
    <div class="row mb-4">
      <div class="col-4 text-center">
        <small class="text-muted">Costs</small>
        <div style="font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: #D4725C;">{{businessExpense}}</div>
      </div>
      <div class="col-4 text-center">
        <small class="text-muted">Revenue</small>
        <div style="font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: #6BAA7E;">{{businessRevenue}}</div>
      </div>
      <div class="col-4 text-center">
        <small class="text-muted">Net (P&L)</small>
        <div style="font-weight: 600; font-family: 'IBM Plex Mono', monospace; color: #F2EFE3;">{{businessNet}}</div>
      </div>
    </div>

    {{!-- Business Charts --}}
    <div class="mt-4 mb-5 mx-2 row card">
      <div class="col-lg-7 d-flex flex-column justify-content-around">
        <div class="chart-category m-3">
          <div class="chart" style="max-width: 550px;margin: 0 auto; max-height: 100px;">
            <canvas id="myCategory" width="300" height="300"></canvas>
          </div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="chart-container p-2" style="max-width: 350px; margin: 0 auto; position:relative;">
          <div class="pt-4">
            <div class="chart-name" style="position: absolute; top: 30px;">
              <h5 style="font-weight: 500;">Category</h5>
            </div>
            <div class="pt-5">
              <canvas id="myChart" width="300" height="300"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{!-- Business Record List --}}
    <div class="mx-2 mb-3 d-flex justify-content-between align-items-center">
      <small class="text-muted"><i class="fas fa-briefcase mr-1"></i> Business Records</small>
      <small style="font-weight:500; color: #A89E8E;">Found {{totalRecords}} records</small>
    </div>

    <div class="mx-2">
      {{#each records}}
      <div class="row flex-md-nowrap py-2 record {{#if this.is_transfer}}record-row-transfer{{/if}}" style="margin: 0; position: relative;">
        <div class="col-2 d-flex justify-content-center align-items-center">
          <i class="{{ this.category.icon }} fa-2x record-icon" {{#if (eq this.type 'revenue' )}}style="color: #3B6B4A;"
            {{/if}}></i>
        </div>
        <div class="col-3 pl-3">
          <h5 class="record-name">{{ this.name }}</h5>
          <small>{{ this.date }}</small>
        </div>
        <div class="col-4 d-flex align-items-center justify-content-end">
          <div class="d-flex flex-column align-items-end">
            <h5 class="record-amount">{{#if (eq this.type 'expense')}}-{{/if}}{{ this.amount }}</h5>
            <small class="text-muted">{{this.merchant}}</small>
          </div>
        </div>
        <div class="col-3 d-flex justify-content-center align-items-center">
          {{#if this.is_transfer}}
          <span class="transfer-stamp">TRANSFERRED</span>
          <form method="POST" action="/transfers/{{ this.id }}?_method=DELETE" class="record-delete ml-2"
            onsubmit="return checkDelete()" style="margin: 0;">
            <button type="submit" class="record-deleteBtn"><i class="fas fa-trash-alt icon-delete"></i></button>
          </form>
          {{else}}
          <a href="/records/{{ this.id }}/edit?type={{this.type}}&ledger={{../activeDashboard}}" class="mr-2"><i
              class="fas fa-edit icon-edit"></i></a>
          <form method="POST" action="/records/{{ this.id }}?_method=DELETE" class="record-delete"
            onsubmit="return checkDelete()" style="margin: 0;">
            <button type="submit" class="record-deleteBtn"><i class="fas fa-trash-alt icon-delete"></i></button>
          </form>
          {{/if}}
        </div>
      </div>
      {{/each}}
    </div>

    {{!-- Business Pagination --}}
    {{#if records.length}}
    <div id="pagination" class="d-flex justify-content-center mt-4">
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item {{#if (eq pageNumber prev)}}disabled{{/if}}">
            <a class="page-link" href="/?page={{prev}}&date={{selectedDate}}&category={{selectedCategory}}&dashboard={{activeDashboard}}"
              aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          {{#each totalPage}}
          {{#if (eq this ../pageNumber)}}
          <li class="page-item active"><a class="page-link" href="#">{{this}}</a></li>
          {{else}}
          <li class="page-item"><a class="page-link"
              href="/?page={{this}}&date={{../selectedDate}}&category={{../selectedCategory}}&dashboard={{../activeDashboard}}">{{this}}</a></li>
          {{/if}}
          {{/each}}
          <li class="page-item {{#if (eq pageNumber next)}}disabled{{/if}}">
            <a class="page-link" href="/?page={{next}}&date={{selectedDate}}&category={{selectedCategory}}&dashboard={{activeDashboard}}"
              aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    {{/if}}

    {{!-- ========== BUSINESS MODULE SUMMARIES ========== --}}
    <div class="row mt-5 mb-4">
      {{!-- Investments --}}
      <div class="col-md-6 mb-4">
        <div class="card" style="position: relative;">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h5 style="font-weight: 600; color: #8B2E1F;"><i class="fas fa-chart-line mr-2"></i>Investments</h5>
              <a href="/investments" class="text-muted"><small>View All</small></a>
            </div>
            {{#if investments.length}}
            {{#each investments}}
            <div class="d-flex justify-content-between align-items-center py-1" style="border-bottom: 1px solid #C4BFB0;">
              <div>
                <span style="font-weight: 500;">{{this.name}}</span>
                <small class="text-muted ml-2" style="font-family: 'IBM Plex Mono', monospace;">{{this.formattedCost}}</small>
              </div>
              {{#if (eq this.status 'Profitable')}}
              <span class="badge badge-success">Profitable</span>
              {{else if (eq this.status 'BreakEven')}}
              <span class="badge badge-info">Break Even</span>
              {{else}}
              <span class="badge badge-warning">Recouping</span>
              {{/if}}
            </div>
            {{/each}}
            {{else}}
            <p class="text-muted text-center py-2">No investments yet</p>
            {{/if}}
          </div>
          <span class="paw-print"><i class="fas fa-paw"></i></span>
        </div>
      </div>

      {{!-- Projects --}}
      <div class="col-md-6 mb-4">
        <div class="card" style="position: relative;">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
              <h5 style="font-weight: 600; color: #8B2E1F;"><i class="fas fa-project-diagram mr-2"></i>Projects</h5>
              <a href="/projects" class="text-muted"><small>View All</small></a>
            </div>
            {{#if projects.length}}
            {{#each projects}}
            <div class="d-flex justify-content-between align-items-center py-1" style="border-bottom: 1px solid #C4BFB0;">
              <div>
                <span style="font-weight: 500;">{{this.name}}</span>
                <small class="text-muted ml-2">{{this.last_touched}}</small>
              </div>
              {{#if (eq this.status 'Active')}}
              <span class="badge badge-success">Active</span>
              {{else if (eq this.status 'Maintenance')}}
              <span class="badge badge-info">Maintenance</span>
              {{else if (eq this.status 'Paused')}}
              <span class="badge badge-warning">Paused</span>
              {{else}}
              <span class="badge badge-secondary">Archived</span>
              {{/if}}
            </div>
            {{/each}}
            {{else}}
            <p class="text-muted text-center py-2">No projects yet</p>
            {{/if}}
          </div>
          <span class="paw-print"><i class="fas fa-paw"></i></span>
        </div>
      </div>
    </div>

    {{/if}}

  </div>
</div>
