<turbo-stream action="append" target="alert"><template>
</template></turbo-stream>
<turbo-stream action="append" target="toaster"><template>
</template></turbo-stream>
<turbo-stream action="update" target="sharedModal"><template>

  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen-sm-down modal-lg" data-controller="modal">

    <div class="modal-content border-0">

      <div class="modal-header border-0">
        <div>
          <h5 id="sharedModalLabel" class="modal-title fw-bold">Rent Calculator</h5>
          <p class="text-body-secondary small mb-0">Estimate a comfortable monthly rent based on income and expenses.</p>
</div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
      <div class="modal-body pt-4">
        <form class="rent-calculator-form" data-controller="rent-calculator">

          <div class="card bg-body-secondary border-0 rounded-4 mb-4">
            <div class="card-body p-4">

              <div class="row g-3 align-items-end mb-3 income-sources">
                <div class="col-12 col-md-7">
                  <label for="income" class="form-label fw-semibold">Net Income (Household)</label>
                  <input type="text" name="income" id="income" placeholder="$0.00" class="form-control form-control-lg" data-rent-calculator-target="income" data-action="input-&gt;rent-calculator#calculate" />
</div>
                <div class="col-12 col-md-5">
                  <label for="income_schedule" class="form-label fw-semibold">Income Schedule</label>
                  <select name="income_schedule" id="income_schedule" class="form-select form-select-lg" data-rent-calculator-target="schedule" data-action="change-&gt;rent-calculator#calculate"><option value="1">Bi-Weekly</option>
<option value="2">Twice Monthly</option>
<option value="3">Monthly</option>
<option selected="selected" value="4">Annually</option></select>
</div></div>
              <div class="expense-sources">
                <label for="expense" class="form-label fw-semibold">Monthly Expenses</label>
                <input type="text" name="expense" id="expense" placeholder="Loans, payments, debts, etc." class="form-control form-control-lg" data-rent-calculator-target="expense" data-action="input-&gt;rent-calculator#calculate" />
</div>
</div></div>
          <div class="text-center p-4 rounded-4 bg-body-tertiary">
            <div class="text-uppercase small fw-semibold text-body-secondary mb-2">You can comfortably afford</div>

            <h1 class="your-rent display-4 fw-bold mb-1" data-rent-calculator-target="result">$0</h1>

            <div class="text-uppercase small fw-semibold text-body-secondary">per month</div>
</div>
</form></div>
</div></div></template></turbo-stream>