{% extends 'includes/base.html' %}

{% block content %}

<h1>Monero Lightwallet Server</h1>
<p>LWS Admin: {{ config.LWS_ADMIN_URL }}</p>
<p>LWS RPC: {{ config.LWS_URL }}</p>
<p>Monero Web Wallet: <a href="{{ config.MYMONERO_URL }}" target="_blank">{{ config.MYMONERO_URL }}</a></p>

<div>
  <a hx-get="/htmx/import_wallet" hx-target="#walletForm" class="button primary outline">Import Wallet</a>
  <a hx-get="/htmx/create_wallet" hx-target="#walletForm" class="button primary">Create Wallet</a>
  <p id="walletForm" style="margin: 2em 0 2em 0"></p>
</div>

<div>
  <h3>Accounts</h3>
  <p>
    The below Monero accounts are stored in LWS;
    only active accounts will be synced. 
    Accounts created in the web wallet must be approved here before use.
  </p>
  <div hx-get="/htmx/show_wallets" hx-target="#show_wallets" class="button outline" hx-indicator="#refresh_loader" onclick="handleRefresh()">
    Refresh
    <i class="fa-solid fa-rotate-right indicator" id="refresh_loader"></i>
  </div>
  <div hx-trigger="load" hx-get="/htmx/show_wallets" id="show_wallets" onload=""></div>
</div>

<script>
  function handleRefresh() {
    const show_wallets = document.getElementById('show_wallets'); 
    const loader = document.getElementById('refresh_loader');
    loader.classList.add('fa-spin');
    show_wallets.classList.add('showFade');
    setTimeout(function() {
      show_wallets.classList.remove('showFade');
      loader.classList.remove('fa-spin');
    }, 2000)
  }
</script>

{% endblock %}