mohnish/money

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand show-profile" href="/profile">
        <i class="fa fa-usd"></i> money
      </a>
    </div>

    <div class="collapse navbar-collapse" id="main-navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a class="show-profile" href="/profile">
            <i class="fa fa-user"></i>
            <%= localStorage.getItem('username') %>
          </a>
        </li>
        <li class="active">
          <a class="show-bills" href="/bills">
            <i class="fa fa-money"></i> bills
          </a>
        </li>
        <li>
          <a class="show-payment-sources" href="/cards">
            <i class="fa fa-credit-card"></i> cards
          </a>
        </li>
      </ul>

      <p class="navbar-text navbar-right">
        <a class="navbar-link signout" href="/">
          <i class="fa fa-sign-out"></i> signout
        </a>
      </p>
    </div>
  </div>
</nav>

<a id="toggle-create-bill-form" class="btn btn-link" href="#" role="button">+ create bill</a>

<form id="create-bill-form" class="form-horizontal">
  <div class="validation-response"></div>

  <div class="form-group">
    <label class="col-sm-2 control-label" for="name">
      name*
    </label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="name" name="name" placeholder="name" required />
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label" for="amount">
      amount*
    </label>
    <div class="col-sm-10">
      <input class="form-control" type="number" step="any" id="amount" name="amount" placeholder="amount" required />
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label" for="next-due-date">
      next due date* (mm/dd/yyyy)
    </label>
    <div class="col-sm-10">
      <input class="form-control" type="date" id="next-due-date" name="next_due_date" placeholder="next due date" value="<%- moment().format('YYYY-MM-DD') %>" required />
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label" for="repeat-intervals">
      repeat interval*
    </label>
    <div class="col-sm-10">
      <select class="form-control" class="repeat-intervals" id="repeat-intervals" name="repeat_interval" required>
      </select>
    </div>
  </div>

  <div class="form-group select-card-form-group">
    <label class="col-sm-2 control-label" for="payment-source-id">
      select card*
    </label>
    <div class="col-sm-10">
      <select class="form-control" class="payment-source-id" id="payment-source-id" name="payment_source_id"></select>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label" for="categories">
      category*
    </label>
    <div class="col-sm-10">
      <select class="form-control" class="categories" id="categories" name="category" required>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label" for="tags">
      tags
    </label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="tags" name="tags" placeholder="optional comma separated tags: eg: tv, netflix, online" />
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button class="btn btn-primary" type="submit">
        create bill
      </button>
    </div>
  </div>
</form>

<div class="condensed-bills list-group"></div>