{% include 'header.html' %}
{% from 'style.html' import page_back_svg, page_forwards_svg, filter_clear_svg, filter_apply_svg, input_arrow_down_svg, arrow_right_svg, input_time_svg %}
{% from 'macros.html' import page_header %}

<script>
  window.ammTablesConfig = {
    stateData: {{ state_data|tojson|safe }},
    configData: {{ config_data|tojson|safe }},
    configContent: {{ config_content|tojson|safe }}
  };
</script>

{{ page_header('Automated Market Maker', 'Automatically create offers and bids based on your configuration.', dark_bg='dark:bg-gray-500') }}

<div class="xl:container mx-auto">
{% include 'inc_messages.html' %}

 <section>
  <div class="lg:container mx-auto mt-6 lg:px-0 px-6">
   <div class="flex flex-wrap -mx-4">
    <div class="w-full px-4 mb-8">
     <div class="p-6 px-0 lg:px-6 bg-white dark:bg-gray-500 rounded-xl shadow-md">
      <div class="flex sm:pr-6 lg:pr-0 justify-end items-center">
        <div class="flex space-x-2">
          <button id="add-new-offer-btn" class="flex items-center px-4 py-2.5 bg-green-600 hover:bg-green-700 border-green-600 font-medium text-sm text-white border rounded-md shadow-button focus:ring-0 focus:outline-none">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
            </svg>
            Add Offer
          </button>
          {% if debug_ui_mode %}
          <button id="add-new-bid-btn" class="flex items-center px-4 py-2.5 bg-green-600 hover:bg-green-700 border-green-600 font-medium text-sm text-white border rounded-md shadow-button focus:ring-0 focus:outline-none">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
            </svg>
            Add Bid
          </button>
          {% endif %}

        </div>
      </div>

      <div class="pb-5">
        <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400" id="ammTabs" role="tablist">
          <li class="mr-2" role="presentation">
            <button class="inline-block px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white focus:outline-none focus:ring-0" id="offers-tab" data-tabs-target="#offers-content" type="button" role="tab" aria-controls="offers" aria-selected="true">
              Offers <span class="text-gray-500 dark:text-gray-400" id="offers-count">(0)</span>
            </button>
          </li>
          {% if debug_ui_mode %}
          <li class="mr-2" role="presentation">
            <button class="inline-block px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white focus:outline-none focus:ring-0" id="bids-tab" data-tabs-target="#bids-content" type="button" role="tab" aria-controls="bids" aria-selected="false">
              Bids <span class="text-gray-500 dark:text-gray-400" id="bids-count">(0)</span>
            </button>
          </li>
          {% endif %}
        </ul>
      </div>

      <div id="ammTabContent">
        <div class="block" id="offers-content" role="tabpanel" aria-labelledby="offers-tab">
          <div class="overflow-x-auto">
            <table class="w-full min-w-max">
              <thead class="uppercase">
                <tr>
                  <th class="p-0">
                    <div class="py-3 pl-4 justify-center rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Name</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Swap</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Amount & Min</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Rate & Receive</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Status</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 rounded-tr-xl">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Actions</span>
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody id="amm-offers-body">
                <tr>
                  <td colspan="7" class="py-4 px-4 text-center text-gray-500 dark:text-gray-400">
                    Loading offers data...
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {% if debug_ui_mode %}
        <div class="hidden" id="bids-content" role="tabpanel" aria-labelledby="bids-tab">
          <div class="overflow-x-auto">
            <table class="w-full min-w-max">
              <thead class="uppercase">
                <tr>
                  <th class="p-0">
                    <div class="py-3 pl-4 justify-center rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Name</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Swap</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Amount & Balance</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Rate & Send</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Status</span>
                    </div>
                  </th>
                  <th class="p-0">
                    <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 rounded-tr-xl">
                      <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Actions</span>
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody id="amm-bids-body">
                <tr>
                  <td colspan="7" class="py-4 px-4 text-center text-gray-500 dark:text-gray-400">
                    Loading bids data...
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        {% endif %}
      </div>
     </div>
    </div>
   </div>
  </div>
 </section>

 <section>
  <div class="lg:container px-4 mx-auto">
   <div class="flex flex-wrap -mx-4">
    <div class="w-full lg:w-1/2 pr-4 mb-8">
     <div class="p-6 bg-white dark:bg-gray-500 rounded-xl shadow-md">
      <h3 class="mb-4 text-xl font-bold text-coolGray-900 dark:text-white">Control</h3>
      <form method="post" autocomplete="off">
       <div class="mb-4">
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Status</label>
        <div class="flex items-center">
         <span class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-lg
          {% if current_status == 'running' %}
          bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300
          {% else %}
          bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300
          {% endif %}
         ">
          {{ current_status|capitalize }}
         </span>
        </div>
       </div>

       <div id="startup-feedback" class="mb-4 hidden">
        <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-lg p-4">
          <div class="flex items-center">
            <svg id="startup-spinner" class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <div>
              <h4 class="text-sm font-medium text-blue-800 dark:text-blue-200" id="startup-title">Starting AMM...</h4>
              <p class="text-sm text-blue-700 dark:text-blue-300 mt-1" id="startup-message">Validating configuration and checking requirements...</p>
            </div>
          </div>
          <div id="startup-progress" class="mt-3">
            <div class="bg-blue-200 dark:bg-blue-800 rounded-full h-2">
              <div id="startup-progress-bar" class="bg-blue-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
          </div>
        </div>
       </div>

       {% if debug_ui_mode %}
       <div class="mb-4">
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Host</label>
        <input type="text" name="host" value="{{ amm_host }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
       </div>

       <div class="mb-4">
        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Port</label>
        <input type="number" name="port" value="{{ amm_port }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
       </div>
       {% else %}
       <input type="hidden" name="host" value="{{ amm_host }}">
       <input type="hidden" name="port" value="{{ amm_port }}">
       {% endif %}

       <div class="mb-4">
        <label class="flex items-center">
         <input type="checkbox" id="autostart-amm" name="autostart" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" {% if amm_autostart %}checked{% endif %}>
         <span class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Auto-start with BasicSwap</span>
        </label>
        <small class="text-xs text-gray-500 dark:text-gray-400 ml-6">Automatically start AMM when BasicSwap starts</small>
       </div>

       {% if debug_ui_mode %}
       <div class="mb-4">
        <label class="flex items-center">
         <input type="checkbox" id="debug-mode" name="debug" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" {% if amm_debug %}checked{% endif %}>
         <span class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Debug Mode</span>
        </label>
       </div>
       {% endif %}

       <div class="flex flex-wrap gap-2">
        <button type="submit" name="start" value="1" class="px-4 py-2.5 bg-green-600 hover:bg-green-700 font-medium text-sm text-white border border-green-600 rounded-md shadow-button focus:ring-0 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
         {% if current_status == 'running' %}disabled{% endif %}>
         Start AMM
        </button>
        <button type="submit" name="stop" value="1" class="px-4 py-2.5 bg-red-900 hover:bg-red-700 font-medium text-sm text-white border border-red-800 rounded-md shadow-button focus:ring-0 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
         {% if current_status == 'stopped' %}disabled{% endif %}>
         Stop
        </button>
       </div>

       {% if debug_ui_mode %}
       <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
         <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Process Management</h4>
         <div class="flex flex-wrap gap-2">
           <button type="submit" name="force_start" value="1" class="px-4 py-2.5 bg-yellow-500 hover:bg-yellow-600 font-medium text-sm text-white border border-yellow-500 rounded-md shadow-button focus:ring-0 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed" title="Kill existing AMM processes and start fresh">
             Force Start
           </button>
           <button type="submit" name="check_processes" value="1" class="inline-flex items-center px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white text-xs font-medium rounded-md shadow-sm focus:ring-0 focus:outline-none">
             Check Processes
           </button>
           <button type="submit" name="kill_orphans" value="1" class="inline-flex items-center px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white text-xs font-medium rounded-md shadow-sm focus:ring-0 focus:outline-none" title="Kill orphaned AMM processes">
             Kill Orphans
           </button>

         </div>
         <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
           Use "Check Processes" to see running AMM processes. Use "Kill Orphans" to clean up duplicate processes. Use "Force Start" to automatically clean up and start fresh.
         </p>
       </div>
       {% endif %}
      </form>
     </div>

     {% if debug_ui_mode %}
     <div class="mt-6 p-6 bg-white dark:bg-gray-500 rounded-xl shadow-md">
      <h3 class="mb-4 text-xl font-bold text-coolGray-900 dark:text-white">Files</h3>
      <div class="mb-4">
       <p class="text-sm text-gray-700 dark:text-gray-300">
        <strong>AMM Directory:</strong> {{ amm_dir }}
       </p>
       <p class="text-sm text-gray-700 dark:text-gray-300">
        <strong>Config File:</strong> {{ config_path }}
        {% if config_exists %}
        <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Exists</span>
        {% else %}
        <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Missing</span>
        {% endif %}
       </p>
       <p class="text-sm text-gray-700 dark:text-gray-300">
        <strong>State File:</strong> {{ state_path }}
        {% if state_exists %}
        <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Exists</span>
        {% else %}
        <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">Will be created</span>
        {% endif %}
       </p>
       <p class="text-sm text-gray-700 dark:text-gray-300">
        <strong>Script Module:</strong> {{ script_path }}
        <span class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Integrated</span>
       </p>
      </div>

     </div>
     {% endif %}
    </div>

    <div class="w-full lg:w-1/2 pl-4 mb-8">
     <div class="p-6 bg-white dark:bg-gray-500 rounded-xl shadow-md">
      <h3 class="mb-4 text-xl font-bold text-coolGray-900 dark:text-white">Configuration</h3>

      <div class="mb-4 border-b pb-5 border-gray-200 dark:border-gray-500">
        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400" role="tablist">
          <li class="mr-2" role="presentation">
            <button class="inline-block px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white focus:outline-none focus:ring-0" id="json-tab" type="button" role="tab" aria-controls="json-content" aria-selected="true">JSON View</button>
          </li>
          <li class="mr-2" role="presentation">
            <button class="inline-block px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white focus:outline-none focus:ring-0" id="settings-tab" type="button" role="tab" aria-controls="settings-content" aria-selected="false">Global Settings</button>
          </li>
          <li class="mr-2" role="presentation">
            <button class="{% if not debug_ui_mode %}hidden{% endif %} inline-block px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white focus:outline-none focus:ring-0" id="overview-tab" type="button" role="tab" aria-controls="overview-content" aria-selected="false">Settings FAQ</button>
          </li>
        </ul>
      </div>

      <form method="post" autocomplete="off">

        <div id="configTabContent">
          <div class="block" id="json-content" role="tabpanel" aria-labelledby="json-tab">
            <div class="mb-4">
              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Config File (JSON)</label>
              <textarea name="config_content" id="config_content" rows="20" class="font-mono bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" {% if not debug_ui_mode %}readonly{% endif %}>{{ config_content }}</textarea>


              <div class="flex flex-col space-y-4 mt-4">
                {% if debug_mode %}
                <div class="flex items-center">
                  <input type="checkbox" id="include_bids" name="include_bids" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
                  <label for="include_bids" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Include bids in default config</label>
                </div>
                {% endif %}
                <div class="flex justify-between">
                  <button type="submit" name="create_default" value="true" id="create_default_btn" class="px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Create Default Config</button>
                  {% if debug_ui_mode %}
                  <button type="submit" name="save_config" value="true" id="save_config_btn" class="px-4 py-2.5 bg-green-600 hover:bg-green-700 font-medium text-sm text-white border border-green-600 rounded-md shadow-button focus:ring-0 focus:outline-none">Save Config</button>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>

          <div class="hidden" id="settings-content" role="tabpanel" aria-labelledby="settings-tab">
            <form method="post" id="global-settings-form">
              <div class="space-y-6">
                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Global Settings</h4>

                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                  <h5 class="mb-3 text-base font-medium text-gray-900 dark:text-white">Timing Settings</h5>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label for="min_seconds_between_offers" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Min Seconds Between Offers</label>
                      <input type="number" id="min_seconds_between_offers" name="min_seconds_between_offers" min="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    <div>
                      <label for="max_seconds_between_offers" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Max Seconds Between Offers</label>
                      <input type="number" id="max_seconds_between_offers" name="max_seconds_between_offers" min="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    <div>
                      <label for="main_loop_delay" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Main Loop Delay (seconds)</label>
                      <input type="number" id="main_loop_delay" name="main_loop_delay" min="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    {% if debug_ui_mode %}
                    <div>
                      <label for="min_seconds_between_bids" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Min Seconds Between Bids</label>
                      <input type="number" id="min_seconds_between_bids" name="min_seconds_between_bids" min="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    <div>
                      <label for="max_seconds_between_bids" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Max Seconds Between Bids</label>
                      <input type="number" id="max_seconds_between_bids" name="max_seconds_between_bids" min="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    <div>
                      <label for="prune_state_delay" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Prune State Delay (seconds)</label>
                      <input type="number" id="prune_state_delay" name="prune_state_delay" min="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    <div>
                      <label for="prune_state_after_seconds" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Prune State After (seconds)</label>
                      <input type="number" id="prune_state_after_seconds" name="prune_state_after_seconds" min="1" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    {% else %}
                    <input type="hidden" id="min_seconds_between_bids" name="min_seconds_between_bids">
                    <input type="hidden" id="max_seconds_between_bids" name="max_seconds_between_bids">
                    <input type="hidden" id="prune_state_delay" name="prune_state_delay">
                    <input type="hidden" id="prune_state_after_seconds" name="prune_state_after_seconds">
                    {% endif %}
                  </div>
                </div>

                <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                  <h5 class="mb-3 text-base font-medium text-gray-900 dark:text-white">Settings</h5>
                  <div class="grid grid-cols-1 gap-4">
                    <div>
                      <label for="auth" class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Authentication</label>
                      <input type="text" id="auth" name="auth" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                  </div>
                </div>

                <div class="flex justify-end">
                  <button type="submit" name="save_global_settings" value="true" class="px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Save Settings</button>
                </div>
                <input type="hidden" name="formid" value="{{ form_id }}">
              </div>
            </form>
          </div>

          <div class="hidden" id="overview-content" role="tabpanel" aria-labelledby="overview-tab">
            {% if debug_ui_mode %}
            <div class="mb-4">
              <button type="button" class="collapsible-header flex items-center justify-between w-full p-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none" data-target="general-settings-content">
                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Settings</h4>
                <svg class="w-5 h-5 transition-transform transform text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </button>
              <div id="general-settings-content" class="collapsible-content mt-2 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hidden overflow-hidden">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div class="break-words">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300"><strong>Offer Timing</strong></p>
                    <ul class="mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                      <li class="break-words"><span class="font-semibold">min_seconds_between_offers:</span> Minimum delay between creating offers (default: 15)</li>
                      <li class="break-words"><span class="font-semibold">max_seconds_between_offers:</span> Maximum delay between creating offers (default: 60)</li>
                    </ul>
                  </div>
                  <div class="break-words">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300"><strong>Bid Timing</strong></p>
                    <ul class="mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                      <li class="break-words"><span class="font-semibold">min_seconds_between_bids:</span> Minimum delay between creating bids (default: 15)</li>
                      <li class="break-words"><span class="font-semibold">max_seconds_between_bids:</span> Maximum delay between creating bids (default: 60)</li>
                    </ul>
                  </div>
                </div>

                <div class="mt-4 grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
                  <div class="break-words">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300"><strong>Script Behavior</strong></p>
                    <ul class="mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                      <li class="break-words"><span class="font-semibold">main_loop_delay:</span> Seconds between main loop iterations (10-1000)</li>
                      <li class="break-words"><span class="font-semibold">auth:</span> Basicswap API auth string, e.g., "admin:password". Ignored if client auth is not enabled.</li>
                      <li class="break-words"><span class="font-semibold">wallet_port_override:</span> If needed, uncomment and set to override wallet API port (for testing only)</li>
                    </ul>
                  </div>
                  <div class="break-words">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300"><strong>State Management</strong></p>
                    <ul class="mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                      <li class="break-words"><span class="font-semibold">prune_state_delay:</span> Seconds between pruning old state data (0 to disable)</li>
                      <li class="break-words"><span class="font-semibold">prune_state_after_seconds:</span> How long to keep old state data (default: 7 days)</li>
                    </ul>
                  </div>
                  <div class="break-words">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300"><strong>Automation Strategies</strong></p>
                    <ul class="mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                      <li class="break-words"><span class="font-semibold">accept_all:</span> Auto-accept all bids (default)</li>
                      <li class="break-words"><span class="font-semibold">accept_known:</span> Only accept bids from known identities</li>
                      <li class="break-words"><span class="font-semibold">none:</span> Manual acceptance required</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <div class="mb-4">
              <button type="button" class="collapsible-header flex items-center justify-between w-full p-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none" data-target="offer-templates-content">
                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Offer Templates</h4>
                <svg class="w-5 h-5 transition-transform transform text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </button>
              <div id="offer-templates-content" class="collapsible-content mt-2 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hidden overflow-hidden">
                <p class="text-sm font-bold text-gray-600 dark:text-gray-400 mb-3 break-words">
                  Offer templates define how the AMM creates offers. Each template can have the following settings:
                </p>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                  <div class="break-words">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300"><strong>Required Settings</strong></p>
                    <ul class="mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                      <li class="break-words"><span class="font-semibold">name:</span> Template name, must be unique</li>
                      <li class="break-words"><span class="font-semibold">enabled:</span> Set to true to enable this offer</li>
                      <li class="break-words"><span class="font-semibold">coin_from:</span> Coin you send</li>
                      <li class="break-words"><span class="font-semibold">coin_to:</span> Coin you receive</li>
                      <li class="break-words"><span class="font-semibold">amount:</span> Amount to create the offer for</li>
                      <li class="break-words"><span class="font-semibold">minrate:</span> Rate below which the offer won't drop</li>
                      <li class="break-words"><span class="font-semibold">min_coin_from_amt:</span> Won't generate offers if wallet balance would drop below this (default: 0)</li>
                      <li class="break-words">
                        <span class="font-semibold">adjust_rates_based_on_market:</span> Controls how AMM determines competitive rates. See detailed explanation below.
                      </li>
                    </ul>
                  </div>
                  <div class="break-words">
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300"><strong>Optional Settings</strong></p>
                    <ul class="mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                      <li class="break-words"><span class="font-semibold">ratetweakpercent:</span> Modify the offer rate from the fetched value (can be negative)</li>
                      <li class="break-words"><span class="font-semibold">amount_variable:</span> Whether bidder can set a different amount</li>
                      <li class="break-words"><span class="font-semibold">address:</span> Address offer is sent from (auto = generate new address per offer)</li>
                      <li class="break-words"><span class="font-semibold">offer_valid_seconds:</span> How long generated offers will be valid for (minimum 600 seconds)</li>
                      <li class="break-words"><span class="font-semibold">swap_type:</span> Type of swap, defaults to "adaptor_sig"</li>
                      <li class="break-words"><span class="font-semibold">min_swap_amount:</span> Minimum purchase quantity when offer amount is variable</li>
                      <li class="break-words"><span class="font-semibold">amount_step:</span> <strong>Mandatory privacy feature</strong> that sets the offer size increment. Prevents revealing exact wallet balance by creating stepped offers. Must be >= 0.001 and <= your offer amount. Default: 0.001</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <div class="mb-4">
              <button type="button" class="collapsible-header flex items-center justify-between w-full p-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none" data-target="bid-templates-content">
                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Bid Templates</h4>
                <svg class="w-5 h-5 transition-transform transform text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </button>
              <div id="bid-templates-content" class="collapsible-content mt-2 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hidden">
                <p class="text-sm font-bold text-gray-600 dark:text-gray-400 mb-3">
                  Bid templates define how the AMM creates bids. Each template can have the following settings:
                </p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300"><strong>Required Settings</strong></p>
                    <ul class="mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                      <li><span class="font-semibold">name:</span> Template name, must be unique</li>
                      <li><span class="font-semibold">enabled:</span> Set to true to enable this bid</li>
                      <li><span class="font-semibold">coin_from:</span> Coin you receive</li>
                      <li><span class="font-semibold">coin_to:</span> Coin you send</li>
                      <li><span class="font-semibold">amount:</span> Amount to bid (minimum: 0.001)</li>
                      <li><span class="font-semibold">max_rate:</span> Maximum rate for bids</li>
                      <li><span class="font-semibold">min_coin_to_balance:</span> Won't send bids if wallet amount would drop below this</li>
                    </ul>
                  </div>
                  <div>
                    <p class="text-sm font-medium text-gray-700 dark:text-gray-300"><strong>Optional Settings</strong></p>
                    <ul class="mt-2 space-y-2 text-sm text-gray-600 dark:text-gray-400">
                      <li><span class="font-semibold">max_concurrent:</span> Maximum number of bids to have active at once (default: 1)</li>
                      <li><span class="font-semibold">amount_variable:</span> Can send bids below the set amount where possible</li>
                      <li><span class="font-semibold">max_coin_from_balance:</span> If needed, uncomment and set to limit bids when wallet amount is above this</li>
                      <li><span class="font-semibold">address:</span> Address bid is sent from (auto = generate new address per bid)</li>
                      <li><span class="font-semibold">min_swap_amount:</span> Minimum swap amount for variable amount bids</li>
                      <li><span class="font-semibold">use_balance_bidding:</span> If true, calculates bid amount as (wallet_balance - offer_min_amount) instead of using template amount</li>
                      <li><span class="font-semibold">offers_to_bid_on:</span> Filter offers to bid on: <strong>"auto_accept_only"</strong> (only auto-accept offers, default), <strong>"all"</strong> (any offer), <strong>"known_only"</strong> (known identities only)</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            {% endif %}

            <div class="mb-4">
              <button type="button" class="collapsible-header flex items-center justify-between w-full p-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none" data-target="rate-adjustment-faq-content">
                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Rate Adjustment Settings FAQ</h4>
                <svg class="w-5 h-5 transition-transform transform text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </button>
              <div id="rate-adjustment-faq-content" class="collapsible-content mt-2 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hidden">
                <p class="text-sm font-bold text-gray-600 dark:text-gray-400 mb-4">
                  The <strong>adjust_rates_based_on_market</strong> setting controls how your AMM determines competitive rates for offers. Here are all available options:
                </p>

                <div class="space-y-4">
                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">Coingecko</h5>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      <strong>Value:</strong> <code class="bg-gray-200 dark:bg-gray-600 px-1 rounded text-gray-900 dark:text-gray-200">false</code><br>
                      <strong>Behavior:</strong> Uses only CoinGecko exchange rates. Fails if CoinGecko data is unavailable.<br>
                      <strong>Best for:</strong> Stable, external market pricing without local market influence.
                    </p>
                  </div>

                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">Orderbook</h5>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      <strong>Value:</strong> <code class="bg-gray-200 dark:bg-gray-600 px-1 rounded text-gray-900 dark:text-gray-200">"only"</code><br>
                      <strong>Behavior:</strong> Uses only Orderbook offers that are as or more permissive than your automation_strategy. Fails if no matches.<br>
                      <strong>Best for:</strong> Competing only with other market makers.
                    </p>
                  </div>

                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">Either</h5>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      <strong>Value:</strong> <code class="bg-gray-200 dark:bg-gray-600 px-1 rounded text-gray-900 dark:text-gray-200">true</code><br>
                      <strong>Behavior:</strong> Uses the higher rate between CoinGecko and market offers. Fails only if BOTH sources are unavailable.<br>
                      <strong>Best for:</strong> Balanced approach with fallback protection.
                    </p>
                  </div>

                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">Both</h5>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      <strong>Value:</strong> <code class="bg-gray-200 dark:bg-gray-600 px-1 rounded text-gray-900 dark:text-gray-200">"all"</code><br>
                      <strong>Behavior:</strong> Uses the higher rate between CoinGecko and market offers. Fails if EITHER source is unavailable.<br>
                      <strong>Best for:</strong> Strict validation requiring both external and market data.
                    </p>
                  </div>

                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">Orderbook - Fallback</h5>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      <strong>Value:</strong> <code class="bg-gray-200 dark:bg-gray-600 px-1 rounded text-gray-900 dark:text-gray-200">"minrate"</code><br>
                      <strong>Behavior:</strong> Uses market offers if available, otherwise falls back to your minimum rate.<br>
                      <strong>Best for:</strong> Market-responsive pricing with guaranteed operation.
                    </p>
                  </div>

                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">Static</h5>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      <strong>Value:</strong> <code class="bg-gray-200 dark:bg-gray-600 px-1 rounded text-gray-900 dark:text-gray-200">"static"</code><br>
                      <strong>Behavior:</strong> Uses only your minimum rate + rate tweak percentage. Ignores all external data.<br>
                      <strong>Best for:</strong> Fixed pricing strategies or testing.
                    </p>
                  </div>
                </div>

                <div class="mt-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                  <h6 class="font-semibold text-gray-900 dark:text-gray-200 mb-2">Rate Calculation Formula</h6>
                  <p class="text-sm text-gray-700 dark:text-gray-300">
                    <strong>Final Rate = Base Rate × (ratetweakpercent / 100 + 1)</strong><br>
                    Where Base Rate comes from your selected adjustment method above.
                  </p>
                </div>

                <div class="mt-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                  <h6 class="font-semibold text-gray-900 dark:text-gray-200 mb-2">Important Notes</h6>
                  <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
                    <li>• Final rate will never go below your <strong>minrate</strong> setting</li>
                    <li>• Strategies which use the orderbook will only consider offers with an automation strategy as permissive or better than your config</li>
                    <li>• If your chosen method fails to get rates, the offer will be skipped for that cycle (Exception: "Static" and "Orderbook (Fallback)")</li>
                    <li>• Rate tweak percentage can be negative to offer below market rates</li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="mb-4">
              <button type="button" class="collapsible-header flex items-center justify-between w-full p-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none" data-target="bidding-strategy-faq-content">
                <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Bidding Strategy Settings FAQ</h4>
                <svg class="w-5 h-5 transition-transform transform text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </button>
              <div id="bidding-strategy-faq-content" class="collapsible-content mt-2 bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hidden">
                <p class="text-sm font-bold text-gray-600 dark:text-gray-400 mb-4">
                   <strong>Attempt Bids First</strong> allows your AMM to fill existing offers before creating new ones.
                </p>

                <div class="space-y-4">
                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">How it works</h5>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      <strong>1.</strong> AMM wants to create a 1 BTC → XMR offer at rate 150<br>
                      <strong>2.</strong> Checks for existing XMR → BTC offers that would fill our intended offer<br>
                      <strong>3.</strong> Places bids on compatible offers to fill what we can<br>
                      <strong>4.</strong> Creates AMM offer only for the remaining amount<br>
                    </p>
                  </div>

                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">Bidding Strategies</h5>
                    <div class="space-y-2 mt-2">
                      <div>
                        <strong class="text-gray-900 dark:text-white">Aggressive:</strong>
                        <span class="text-sm text-gray-600 dark:text-gray-400">Bid on all compatible offers to fill as much as possible</span>
                      </div>
                      <div>
                        <strong class="text-gray-900 dark:text-white">Balanced:</strong>
                        <span class="text-sm text-gray-600 dark:text-gray-400">Mix of bidding and offer creation (default)</span>
                      </div>
                      <div>
                        <strong class="text-gray-900 dark:text-white">Conservative:</strong>
                        <span class="text-sm text-gray-600 dark:text-gray-400">Only bid on offers that match your automation strategy</span>
                      </div>
                      <div>
                        <strong class="text-gray-900 dark:text-white">Best rates from auto-accept offers only:</strong>
                        <span class="text-sm text-gray-600 dark:text-gray-400">Only bid on offers that match your automation strategy, prioritizing best rates</span>
                      </div>
                    </div>
                  </div>

                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">Automation Strategy Compatibility</h5>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                      Bidding strategies consider your AMM's automation strategy when selecting offers to bid on:<br>
                      <strong>• Accept All:</strong> Only bids on offers with "Accept All" automation<br>
                      <strong>• Accept Known:</strong> Bids on offers with "Accept All" or "Accept Known" automation<br>
                      <strong>• None:</strong> Bids on all offers regardless of automation strategy<br>
                    </p>
                  </div>

                  <div class="border-l-4 border-gray-300 dark:border-gray-600 pl-4">
                    <h5 class="font-semibold text-gray-900 dark:text-white">Configuration Options</h5>
                    <div class="space-y-2 mt-2">
                      <div>
                        <strong class="text-gray-900 dark:text-white">Max Bid Percentage:</strong>
                        <span class="text-sm text-gray-600 dark:text-gray-400">Maximum % of your offer amount to use for bidding (0-100)</span>
                      </div>
                      <div>
                        <strong class="text-gray-900 dark:text-white">Rate Tolerance %:</strong>
                        <span class="text-sm text-gray-600 dark:text-gray-400">Bid on offers up to this % better than your intended rate</span>
                      </div>
                      <div>
                        <strong class="text-gray-900 dark:text-white">Min Remaining Offer:</strong>
                        <span class="text-sm text-gray-600 dark:text-gray-400">Don't create AMM offer if remainder is below this amount</span>
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>

       <!-- AMM Configuration Tabs handled by external JS -->
      </form>
     </div>

     {% if state_exists and debug_ui_mode %}
     <div class="mt-6 p-6 bg-white dark:bg-gray-500 rounded-xl shadow-md">
      <h3 class="mb-4 text-xl font-bold text-coolGray-900 dark:text-white">State File (JSON)</h3>
      <div class="mb-4">
       <div class="font-mono bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 h-64 overflow-y-auto dark:bg-gray-700 dark:border-gray-600 dark:text-white">{{ state_content }}</div>
       <div class="mt-4">
         <form method="post">
           <button type="button" id="clearStateBtn" class="px-4 py-2.5 bg-red-500 hover:bg-red-600 font-medium text-sm text-white border border-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
             Clear AMM State
           </button>
           <input type="hidden" name="formid" value="{{ form_id }}">
         </form>
       </div>
      </div>
     </div>
     {% endif %}
    </div>
   </div>

   {% if debug_ui_mode %}
   <div class="mb-8 -mx-4">
    <div class="p-6 bg-white dark:bg-gray-500 rounded-xl shadow-md">
     <h3 class="mb-4 text-xl font-bold text-coolGray-900 dark:text-white">AMM Logs</h3>
     <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 h-64 overflow-y-auto font-mono text-sm text-gray-900 dark:text-gray-200">
      {% if logs %}
       {% for log in logs %}
        <div class="mb-1">{{ log }}</div>
       {% endfor %}
      {% else %}
       <div class="text-gray-500 dark:text-gray-400">No logs available</div>
      {% endif %}
     </div>
    </div>
   </div>
   {% endif %}
  </div>
 </section>
</div>

<div id="add-amm-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity" aria-hidden="true">
      <div class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900 dark:opacity-90"></div>
    </div>

    <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-visible shadow-xl transform transition-all sm:my-8 sm:align-middle md:max-w-2xl md:w-full">
      <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="add-modal-title">Add New Item</h3>
            <div class="mt-4">
              <form id="add-amm-form" class="space-y-4">
                <input type="hidden" id="add-amm-type">

                <div>
                  <label for="add-amm-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name <span class="text-red-500">*</span></label>
                  <input type="text" id="add-amm-name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g., Offer 1" required>
                </div>

                <div class="flex items-center">
                  <input type="checkbox" id="add-amm-enabled" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600" checked>
                  <label for="add-amm-enabled" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Enabled</label>
                </div>

                <div class="grid grid-cols-2 gap-4">
                  <div class="min-h-[80px]">
                    <label for="add-amm-coin-from" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Maker</label>
                    <div class="relative">
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                      <select id="add-amm-coin-from" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                        {% for c in coins %}
                        <option value="{{ c[1] }}" data-symbol="{{ c[0] }}" data-balance="{{ c[2] }}">{{ c[1] }}</option>
                        {% endfor %}
                      </select>
                    </div>

                  </div>

                  <div class="min-h-[80px]">
                    <label for="add-amm-coin-to" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Taker</label>
                    <div class="relative">
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                      <select id="add-amm-coin-to" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                        {% for c in coins %}
                        <option value="{{ c[1] }}" data-symbol="{{ c[0] }}" data-balance="{{ c[2] }}">{{ c[1] }}</option>
                        {% endfor %}
                      </select>
                    </div>

                  </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                  <div>
                    <label for="add-amm-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Offer Amount <span class="text-red-500">*</span></label>
                    <input type="text" id="add-amm-amount" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0.0">
                    <div class="mt-2 flex space-x-2">
                      <button type="button" class="hidden md:block py-1 px-2 bg-blue-500 text-white text-xs rounded-md focus:outline-none" data-set-amm-amount="0.25" data-input-id="add-amm-amount">25%</button>
                      <button type="button" class="hidden md:block py-1 px-2 bg-blue-500 text-white text-xs rounded-md focus:outline-none" data-set-amm-amount="0.5" data-input-id="add-amm-amount">50%</button>
                      <button type="button" class="py-1 px-2 bg-blue-500 text-white text-xs rounded-md focus:outline-none" data-set-amm-amount="1" data-input-id="add-amm-amount">100%</button>
                    </div>
                  </div>

                  <div>
                    <label id="add-amm-rate-label" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Minimum Rate <span class="text-red-500">*</span></label>
                    <input type="text" id="add-amm-rate" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0.0">
                    <div class="mt-2">
                      <button type="button" id="add-get-rate-button" class="py-1 px-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-md focus:outline-none">Get Rate</button>
                    </div>
                  </div>
                </div>

                <div id="add-offer-fields" class="hidden space-y-4">
                  <div class="grid grid-cols-2 gap-4">

                    <div>
                      <label for="add-offer-ratetweakpercent" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Rate Tweak Percent</label>
                      <input type="text" id="add-offer-ratetweakpercent" pattern="-?[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="0" placeholder="0">
                    </div>

                    <div>
                      <label for="add-offer-min-coin-from-amt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Minimum Balance</label>
                      <input type="text" id="add-offer-min-coin-from-amt" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0.0">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="add-offer-valid-seconds" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Offer Valid Seconds <span class="text-red-500">*</span></label>
                      <input type="text" id="add-offer-valid-seconds" pattern="[0-9]+" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="3600" placeholder="3600">
                      <small class="text-xs text-gray-500 dark:text-gray-400">Minimum 600 seconds (10 minutes).</small>
                    </div>

                    <div>
                      <label for="add-offer-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SMSG Address / Identity</label>
                      <input type="text" id="add-offer-address" class="font-mono bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="auto" value="auto">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="add-offer-swap-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Swap Type</label>
                      <div class="relative">
                        <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                        <select id="add-offer-swap-type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                          <option value="adaptor_sig" data-desc="Adaptor Sig">Adaptor Sig (default)</option>
                          <option value="seller_first" data-desc="Secret Hash">Secret Hash</option>
                        </select>
                      </div>
                    </div>

                    <div>
                      <label for="add-offer-min-swap-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Swap Amount</label>
                      <input type="text" id="add-offer-min-swap-amount" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="0.001" placeholder="0.001">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="add-offer-amount-step" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Offer Size Increment <span class="text-red-500">*</span></label>
                      <input type="text" id="add-offer-amount-step" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g., 5.0" required>
                      <small class="text-xs text-gray-500 dark:text-gray-400">
                        How much to adjust offer size when partially filled. Must be between 0.001 and your offer amount.
                      </small>
                    </div>

                    {% if debug_ui_mode %}
                    <div>
                      <label for="add-offer-automation-strategy" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Auto Accept Bids</label>
                      <div class="relative">
                        <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                        <select id="add-offer-automation-strategy" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                          <option value="accept_all">Accept All Bids</option>
                          <option value="accept_known">Accept Known Identities</option>
                          <option value="none">No Auto Accept</option>
                        </select>
                      </div>
                    </div>
                    {% endif %}
                  </div>

                  <div>
                    <label for="add-offer-adjust-rates" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Adjust Rates Based on Market</label>
                    <div class="relative">
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                      <select id="add-offer-adjust-rates" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                        <option value="false">Coingecko - Use CoinGecko, fail if rates not found</option>
                        <option value="only">Orderbook - Use Orderbook auto-accept offers only, fail if rates not found</option>
                        <option value="true">Either - Use greater of CoinGecko + Orderbook, fail if BOTH unavailable</option>
                        <option value="all">Both - Use greater of CoinGecko + Orderbook, fail if EITHER unavailable</option>
                        <option value="minrate">Orderbook (Fallback) - Fallback to Minimum Rate</option>
                        <option value="static">Static - Exclusively use Minimum Rate + Tweak</option>
                      </select>
                    </div>
                  </div>

                  {% if debug_ui_mode %}
                  <div class="border-t border-gray-200 dark:border-gray-600 pt-4">
                    <div class="flex items-center mb-3">
                      <input type="checkbox" id="add-offer-attempt-bids-first" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                      <label for="add-offer-attempt-bids-first" class="ml-2 block text-sm font-medium text-gray-900 dark:text-gray-300">Attempt Bids First</label>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">Before creating an AMM offer, attempt to fill existing offers by placing bids, then create offer for remainder.</p>

                    <div id="add-offer-bidding-options" class="hidden space-y-4">
                      <div class="grid grid-cols-2 gap-4">
                        <div>
                          <label for="add-offer-bid-strategy" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Bidding Strategy</label>
                          <div class="relative">
                            <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                            <select id="add-offer-bid-strategy" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                              <option value="aggressive">Aggressive - Fill as much as possible</option>
                              <option value="balanced" selected>Balanced - Mix of bids and offers</option>
                              <option value="conservative">Conservative - Only obvious wins</option>
                              <option value="auto_accept_only">Best rates from auto-accept offers only</option>
                            </select>
                          </div>
                        </div>

                        <div>
                          <label for="add-offer-max-bid-percentage" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Max Bid Percentage</label>
                          <input type="text" id="add-offer-max-bid-percentage" pattern="[0-9]+" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="50" placeholder="50">
                          <small class="text-xs text-gray-500 dark:text-gray-400">Maximum % of offer amount to use for bidding (0-100)</small>
                        </div>
                      </div>

                      <div class="grid grid-cols-2 gap-4">
                        <div>
                          <label for="add-offer-bid-rate-tolerance" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Rate Tolerance %</label>
                          <input type="text" id="add-offer-bid-rate-tolerance" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="2.0" placeholder="2.0">
                          <small class="text-xs text-gray-500 dark:text-gray-400">Bid on offers up to this % better than our rate</small>
                        </div>

                        <div>
                          <label for="add-offer-min-remaining-offer" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Remaining Offer</label>
                          <input type="text" id="add-offer-min-remaining-offer" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="0.001" placeholder="0.001">
                          <small class="text-xs text-gray-500 dark:text-gray-400">Don't create offer if remainder is below this amount</small>
                        </div>
                      </div>
                    </div>
                  </div>
                  {% endif %}
                </div>

                <div id="add-bid-fields" class="hidden space-y-4">
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="add-bid-min-coin-to-balance" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Coin To Balance</label>
                      <input type="text" id="add-bid-min-coin-to-balance" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="1.0" placeholder="1.0">
                    </div>

                    <div>
                      <label for="add-bid-max-concurrent" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Max Concurrent</label>
                      <input type="text" id="add-bid-max-concurrent" pattern="[0-9]+" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="1" placeholder="1">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="add-bid-offers-to-bid-on" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Offers to Bid On</label>
                      <div class="relative">
                        <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                        <select id="add-bid-offers-to-bid-on" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                          <option value="all">All Offers</option>
                          <option value="auto_accept_only">Auto-Accept Offers Only</option>
                          <option value="known_only">Known Identities Only</option>
                        </select>
                      </div>
                    </div>

                    <div>
                      <label for="add-bid-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Address</label>
                      <input type="text" id="add-bid-address" class="font-mono bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="auto" value="auto">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="add-bid-min-swap-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Swap Amount</label>
                      <input type="text" id="add-bid-min-swap-amount" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="0.001" placeholder="0.001">
                    </div>

                    <div class="flex items-center">
                      <input type="checkbox" id="add-bid-use-balance-bidding" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                      <label for="add-bid-use-balance-bidding" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Use Balance Bidding</label>
                    </div>
                  </div>

                  <div class="text-xs text-gray-500 dark:text-gray-400">
                    <strong>Use Balance Bidding:</strong> Calculate bid amount as (wallet_balance - offer_min_amount) instead of using template amount.
                  </div>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <button type="button" id="add-amm-save" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:ring-0 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
          Add
        </button>
        <button type="button" id="add-amm-cancel" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:ring-0 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 dark:border-gray-500">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

<div id="edit-amm-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity" aria-hidden="true">
      <div class="absolute inset-0 bg-gray-500 opacity-75 dark:bg-gray-900 dark:opacity-90"></div>
    </div>

    <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-visible shadow-xl transform transition-all sm:my-8 sm:align-middle md:max-w-2xl md:w-full">
      <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="edit-modal-title">Edit Item</h3>
            <div class="mt-4">
              <form id="edit-amm-form" class="space-y-4">
                <input type="hidden" id="edit-amm-type">
                <input type="hidden" id="edit-amm-id">
                <input type="hidden" id="edit-amm-original-name">

                <div>
                  <label for="edit-amm-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name <span class="text-red-500">*</span></label>
                  <input type="text" id="edit-amm-name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required>
                </div>

                <div class="flex items-center">
                  <input type="checkbox" id="edit-amm-enabled" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" checked>
                  <label for="edit-amm-enabled" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Enabled</label>
                </div>

                <div class="grid grid-cols-2 gap-4">
                  <div class="min-h-[80px]">
                    <label for="edit-amm-coin-from" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Maker</label>
                    <div class="relative">
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                      <select id="edit-amm-coin-from" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                        {% for c in coins %}
                        <option value="{{ c[1] }}" data-symbol="{{ c[0] }}" data-balance="{{ c[2] }}">{{ c[1] }}</option>
                        {% endfor %}
                      </select>
                    </div>

                  </div>

                  <div class="min-h-[80px]">
                    <label for="edit-amm-coin-to" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Taker</label>
                    <div class="relative">
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                      <select id="edit-amm-coin-to" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                        {% for c in coins %}
                        <option value="{{ c[1] }}" data-symbol="{{ c[0] }}" data-balance="{{ c[2] }}">{{ c[1] }}</option>
                        {% endfor %}
                      </select>
                    </div>

                  </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                  <div>
                    <label for="edit-amm-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Offer Amount <span class="text-red-500">*</span></label>
                    <input type="text" id="edit-amm-amount" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0.0">
                    <div class="mt-2 flex space-x-2">
                      <button type="button" class="hidden md:block py-1 px-2 bg-blue-500 text-white text-xs rounded-md focus:outline-none" data-set-amm-amount="0.25" data-input-id="edit-amm-amount">25%</button>
                      <button type="button" class="hidden md:block py-1 px-2 bg-blue-500 text-white text-xs rounded-md focus:outline-none" data-set-amm-amount="0.5" data-input-id="edit-amm-amount">50%</button>
                      <button type="button" class="py-1 px-2 bg-blue-500 text-white text-xs rounded-md focus:outline-none" data-set-amm-amount="1" data-input-id="edit-amm-amount">100%</button>
                    </div>
                  </div>

                  <div>
                    <label id="edit-amm-rate-label" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Minimum Rate <span class="text-red-500">*</span></label>
                    <input type="text" id="edit-amm-rate" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0.0">
                    <div class="mt-2">
                      <button type="button" id="edit-get-rate-button" class="py-1 px-2 bg-blue-500 hover:bg-blue-600 text-white text-xs rounded-md focus:outline-none">Get Rate</button>
                    </div>
                  </div>
                </div>

                <div id="edit-offer-fields" class="hidden space-y-4">
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="edit-offer-ratetweakpercent" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Rate Tweak Percent</label>
                      <input type="text" id="edit-offer-ratetweakpercent" pattern="-?[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0">
                    </div>

                    <div>
                      <label for="edit-offer-min-coin-from-amt" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Minimum Balance</label>
                      <input type="text" id="edit-offer-min-coin-from-amt" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0.0">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="edit-offer-valid-seconds" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Offer Valid Seconds <span class="text-red-500">*</span></label>
                      <input type="text" id="edit-offer-valid-seconds" pattern="[0-9]+" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="3600">
                      <small class="text-xs text-gray-500 dark:text-gray-400">Minimum 600 seconds (10 minutes).</small>
                    </div>

                    <div>
                      <label for="edit-offer-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">SMSG Address / Identity</label>
                      <input type="text" id="edit-offer-address" class="font-mono bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="auto">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="edit-offer-swap-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Swap Type</label>
                      <div class="relative">
                        <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                        <select id="edit-offer-swap-type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                          <option value="adaptor_sig" data-desc="Adaptor Sig">Adaptor Sig</option>
                          <option value="seller_first" data-desc="Secret Hash">Secret Hash</option>
                        </select>
                      </div>
                    </div>

                    <div>
                      <label for="edit-offer-min-swap-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Minimum Swap Amount</label>
                      <input type="text" id="edit-offer-min-swap-amount" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0.001">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="edit-offer-amount-step" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Offer Size Increment <span class="text-red-500">*</span></label>
                      <input type="text" id="edit-offer-amount-step" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g., 5.0" required>
                      <small class="text-xs text-gray-500 dark:text-gray-400">
                        How much to adjust offer size when partially filled. Must be between 0.001 and your offer amount.
                      </small>
                    </div>

                    {% if debug_ui_mode %}
                    <div>
                      <label for="edit-offer-automation-strategy" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Auto Accept Bids</label>
                      <div class="relative">
                        <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                        <select id="edit-offer-automation-strategy" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                          <option value="accept_all">Accept All Bids</option>
                          <option value="accept_known">Accept Known Identities</option>
                          <option value="none">No Auto Accept</option>
                        </select>
                      </div>
                    </div>
                    {% endif %}
                  </div>

                  <div>
                    <label for="edit-offer-adjust-rates" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Adjust Rates Based on Market</label>
                    <div class="relative">
                      <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                      </svg>
                      <select id="edit-offer-adjust-rates" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                        <option value="false">Coingecko - Use CoinGecko, fail if rates not found</option>
                        <option value="only">Orderbook - Use Orderbook auto-accept offers only, fail if rates not found</option>
                        <option value="true">Either - Use greater of CoinGecko + Orderbook, fail if BOTH unavailable</option>
                        <option value="all">Both - Use greater of CoinGecko + Orderbook, fail if EITHER unavailable</option>
                        <option value="minrate">Orderbook (Fallback) - Fallback to Minimum Rate</option>
                        <option value="static">Static - Exclusively use Minimum Rate + Tweak</option>
                      </select>
                    </div>
                  </div>

                  {% if debug_ui_mode %}
                  <div class="border-t border-gray-200 dark:border-gray-600 pt-4">
                    <div class="flex items-center mb-3">
                      <input type="checkbox" id="edit-offer-attempt-bids-first" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                      <label for="edit-offer-attempt-bids-first" class="ml-2 block text-sm font-medium text-gray-900 dark:text-gray-300">Attempt Bids First</label>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">Before creating an AMM offer, attempt to fill existing offers by placing bids, then create offer for remainder.</p>

                    <div id="edit-offer-bidding-options" class="hidden space-y-4">
                      <div class="grid grid-cols-2 gap-4">
                        <div>
                          <label for="edit-offer-bid-strategy" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Bidding Strategy</label>
                          <div class="relative">
                            <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                            <select id="edit-offer-bid-strategy" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                              <option value="aggressive">Aggressive - Fill as much as possible</option>
                              <option value="balanced" selected>Balanced - Mix of bids and offers</option>
                              <option value="conservative">Conservative - Only obvious wins</option>
                              <option value="auto_accept_only">Best rates from auto-accept offers only</option>
                            </select>
                          </div>
                        </div>

                        <div>
                          <label for="edit-offer-max-bid-percentage" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Max Bid Percentage</label>
                          <input type="text" id="edit-offer-max-bid-percentage" pattern="[0-9]+" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="50" placeholder="50">
                          <small class="text-xs text-gray-500 dark:text-gray-400">Maximum % of offer amount to use for bidding (0-100)</small>
                        </div>
                      </div>

                      <div class="grid grid-cols-2 gap-4">
                        <div>
                          <label for="edit-offer-bid-rate-tolerance" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Rate Tolerance %</label>
                          <input type="text" id="edit-offer-bid-rate-tolerance" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="2.0" placeholder="2.0">
                          <small class="text-xs text-gray-500 dark:text-gray-400">Bid on offers up to this % better than our rate</small>
                        </div>

                        <div>
                          <label for="edit-offer-min-remaining-offer" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Remaining Offer</label>
                          <input type="text" id="edit-offer-min-remaining-offer" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="0.001" placeholder="0.001">
                          <small class="text-xs text-gray-500 dark:text-gray-400">Don't create offer if remainder is below this amount</small>
                        </div>
                      </div>
                    </div>
                  </div>
                  {% endif %}
                </div>

                <div id="edit-bid-fields" class="hidden space-y-4">
                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="edit-bid-min-coin-to-balance" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Coin To Balance</label>
                      <input type="text" id="edit-bid-min-coin-to-balance" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="1.0">
                    </div>

                    <div>
                      <label for="edit-bid-max-concurrent" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Max Concurrent</label>
                      <input type="text" id="edit-bid-max-concurrent" pattern="[0-9]+" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="1">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="edit-bid-offers-to-bid-on" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Offers to Bid On</label>
                      <div class="relative">
                        <svg class="absolute top-1/2 right-3 transform -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                        <select id="edit-bid-offers-to-bid-on" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 appearance-none">
                          <option value="all">All Offers</option>
                          <option value="auto_accept_only">Auto-Accept Offers Only</option>
                          <option value="known_only">Known Identities Only</option>
                        </select>
                      </div>
                    </div>

                    <div>
                      <label for="edit-bid-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Address</label>
                      <input type="text" id="edit-bid-address" class="font-mono bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="auto">
                    </div>
                  </div>

                  <div class="grid grid-cols-2 gap-4">
                    <div>
                      <label for="edit-bid-min-swap-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Swap Amount</label>
                      <input type="text" id="edit-bid-min-swap-amount" pattern="[0-9]*\.?[0-9]*" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0.001">
                    </div>

                    <div class="flex items-center">
                      <input type="checkbox" id="edit-bid-use-balance-bidding" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                      <label for="edit-bid-use-balance-bidding" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Use Balance Bidding</label>
                    </div>
                  </div>

                  <div class="text-xs text-gray-500 dark:text-gray-400">
                    <strong>Use Balance Bidding:</strong> Calculate bid amount as (wallet_balance - offer_min_amount) instead of using template amount.
                  </div>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <button type="button" id="edit-amm-save" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:ring-0 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
          Save Changes
        </button>
        <button type="button" id="edit-amm-cancel" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:ring-0 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 dark:border-gray-500">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

<div id="errorModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
  <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-300 ease-out"></div>
  <div class="relative z-50 min-h-screen px-4 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-500 rounded-lg max-w-md w-full p-6 shadow-lg transition-opacity duration-300 ease-out">
      <div class="text-center">
        <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 mb-4">
          <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
          </svg>
        </div>
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4" id="errorTitle">Error</h2>
        <p class="text-gray-600 dark:text-gray-200 mb-6 whitespace-pre-line" id="errorMessage">An error occurred</p>
        <div class="flex justify-center">
          <button type="button" id="errorOk"
                  class="px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
            OK
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="confirmModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
  <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-300 ease-out"></div>
  <div class="relative z-50 min-h-screen px-4 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-500 rounded-lg max-w-md w-full p-6 shadow-lg transition-opacity duration-300 ease-out">
      <div class="text-center">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4" id="confirmTitle">Confirm Action</h2>
        <p class="text-gray-600 dark:text-gray-200 mb-6 whitespace-pre-line" id="confirmMessage">Are you sure?</p>
        <div class="flex justify-center gap-4">
          <button type="button" id="confirmYes"
                  class="px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
            Confirm
          </button>
          <button type="button" id="confirmNo"
                  class="px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="/static/js/pages/amm-tables.js"></script>
<script src="/static/js/pages/amm-config-tabs.js"></script>
<script src="/static/js/pages/amm-page.js"></script>

{% include 'footer.html' %}