<div id="walletsToolbar">
  <button type="button" class="btn btn-etho" id="btnNewAddress">
    <i class="fas fa-plus"></i>
  </button>
</div>
<div id="addressList" class="{{#if addressData.length}}addressWrapper{{else}}noAddressWrapper{{/if}}">
  {{#if addressData.length}}
    <table class="bordered" id="addressTable">
      <thead>
        <tr>
          <th scope="col" class="noSortCollumn" data-sort-method='none'></th>
          <th scope="col">Name</th>
          <th scope="col">Address</th>
          <th scope="col" class="noSortCollumn" data-sort-method='none'>Actions</th>
        </tr>
      </thead>
      <tbody>
        {{#addressData}}
          <tr>
            <th scope="row" class="colEdit">
              <button type="button" class="btn btn-etho btnChangAddressName" data-address="{{address}}" data-name="{{name}}">Edit</button>
            </th>
            <td>{{name}}</td>
            <td>
              <span class="textAddress">{{address}}</span></td>
            <td>
              <button type="button" class="btn btn-etho btnDeleteAddress" data-address="{{address}}">
                <i class="far fa-trash-alt"></i>
              </button>
              <button type="button" class="btn btn-etho btnShowQRCode" data-address="{{address}}">
                <i class="fas fa-qrcode"></i>
              </button>
            </td>
          </tr>
        {{/addressData}}
      </tbody>
    </table>
  {{else}}
    <div id="noAddressPresent">You don't have any addresses, create a new one</div>
  {{/if}}
</div>

<div id="dlgCreateAddressAndName" class="modalDialog" data-izimodal-title="Create new address" data-izimodal-subtitle="Enter the name and the address" data-izimodal-icon="icon-home">
  <div class="modalBody">
    <div class="form-group">
      <label for="addressName">Address Name:</label>
      <input type="text" class="form-control" id="addressName">
    </div>
    <div class="form-group">
      <label for="addressHash">Address Hash:</label>
      <input type="text" class="form-control" id="addressHash">
    </div>
    <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnCreateAddressConfirm">Confirm</button>
  </div>
</div>

<!-- The modal to change address name -->
<div id="dlgChangeAddressName" class="modalDialog" data-izimodal-title="Address Name" data-izimodal-subtitle="Enter the name for this address" data-izimodal-icon="icon-home">
  <div class="modalBody">
    <div class="form-group">
      <label for="usr">Type Name:</label>
      <input type="text" class="form-control" id="inputAddressName">
    </div>
    <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnChangeAddressNameConfirm">Confirm</button>
  </div>
</div>

<!-- The modal for delete confirmation -->
<div id="dlgDeleteAddressConfirm" class="modalDialog" data-izimodal-title="Delete Address" data-izimodal-icon="icon-home">
  <div class="modalBody">
    <div class="form-group">
      <span>Do you really want to delete the address?</span>
    </div>
    <button type="button" class="btn btn-etho btn-dialog-cancel" id="btnDeleteAddressCancel">No</button>
    <button type="button" class="btn btn-etho btn-dialog-confirm" id="btnDeleteAddressConfirm">Yes</button>
  </div>
</div>

<span id="nodestorage" style="display:none;">Loading</span>
