<div class="sendWrapper">
  <div class="card-panel">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s6">
        	<label for="sendToAddress" class="active">Sender:</label>
          <select id="sendFromAddress">
            {{#addressData}}
              <option value="{{address}}">{{balance}} | {{name}} | {{address}}</option>
            {{/addressData}}
          </select>

        </div>
        <div class="input-field col s6">
          <label for="sendToAddress" class="active">Recipient:</label>
          <div class="addressInputWrapper">
            <input id="sendToAddress" placeholder="recipient address" type="text">
            <button type="button" class="btn button3 btnSendToolButton" id="btnAddToAddressBook">
              <i class="fas fa-plus"></i>
            </button>
            <button type="button" class="btn button3 btnSendToolButton" id="btnLookForToAddress">
              <i class="fas fa-search"></i>
            </button>
          </div>
          <small id="sendToAddressName" class="form-text text-muted"></small>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s6">
		<label for="sendAmmount" style="display:flex">
		    <img height="22px" width="22px" style="margin: 11px 6px 0 2px;" src="https://raw.githubusercontent.com/Ether1Project/ETHO-Protocol-Branding/master/NewLogo2024/newethologo_32.png" alt="ETHO" />
		    <input id="sendAmmount" placeholder="0" type="number">
		</label>

          <label for="sendAmmount" class="active">Amount:</label>
        </div>
        <div class="input-field col s6">
          <div class="input-field col s12">
            <span id="sendMaxAmmount">0</span><img height="22px" width="22px" style="margin-bottom: -6px;" src="https://raw.githubusercontent.com/Ether1Project/ETHO-Protocol-Branding/master/NewLogo2024/newethologo_32.png" alt="ETHO" />Total
            <button type="button" class="button4" id="btnSendAll">ALL</button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="input-field col s12">
          <button type="button" class="button4" id="btnSendTransaction">Send</button>
        </div>
      </div>
    </form>
  </div>
  <div id="cardTransactionsForAddress" class="card-panel" style="display: none;">
    <table id="tableTransactionsForAddress" class="display" style="width:100%">
      <thead>
        <tr>
          <th>Block</th>
          <th>Timestamp</th>
          <th>To</th>
          <th>Value</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Block</th>
          <th>Timestamp</th>
          <th>To</th>
          <th>Value</th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

<!-- send details dialog -->
<div id="dlgSendWalletPassword" class="modalDialog" data-izimodal-title="Wallet Password" data-izimodal-subtitle="To send from this wallet, please enter the wallet password" data-izimodal-icon="icon-home">
  <div class="modalBody">
    <div class="form-group sendTXInfo">
      <i class="fas fa-wallet"></i>
      <label>From address:</label>
      <label id="fromAddressInfo"></label>
    </div>
    <div class="form-group sendTXInfo">
      <i class="fas fa-wallet"></i>
      <label>To address:</label>
      <label id="toAddressInfo"></label>
    </div>
    <div class="form-group sendTXInfo">
      <i class="fas fa-dollar-sign"></i>
      <label>Value to send:</label>
      <label id="valueToSendInfo"></label>
      <label class="currencyTicker">ETHO</label>
    </div>
    <div class="form-group sendTXInfo">
      <i class="fas fa-dollar-sign"></i>
      <label>Fee to pay:</label>
      <label id="feeToPayInfo"></label>
      <label class="currencyTicker">ETHO</label>
    </div>
    <hr class="sendTXdivider">
    <div class="form-group sendTXPass">
      <label for="usr">Type Password:</label>
      <input type="password" class="form-control" id="walletPassword">
    </div>
    <button type="button" class="btn button3 btn-dialog-confirm" id="btnSendWalletPasswordConfirm">Confirm</button>
  </div>
</div>

<!-- The modal for address list -->
<div id="dlgAddressList" class="modalDialog" data-izimodal-title="AddressList" data-izimodal-subtitle="Please select an address from the list" data-izimodal-icon="icon-home">
  <div class="modalBody" id="dlgAddressListBody"></div>
</div>

<!-- The modal to add address to address book -->
<div id="dlgAddAddressToBook" 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">Address Name:</label>
      <input type="text" class="form-control" id="inputAddressName">
    </div>
    <button type="button" class="btn button3 btn-dialog-confirm" id="btnAddAddressToBookConfirm">Confirm</button>
  </div>
</div>
<span id="nodestorage" style="display:none;">Loading</span>
