basicswap_miserver/basicswap/templates/offers.html

{% include 'header.html' %}
<div class="container mx-auto">
  <section class="bg-white p-5 mt-5">
    <div class="flex flex-wrap items-center -m-2">
      <div class="w-full md:w-1/2 p-2">
        <ul class="flex flex-wrap items-center gap-x-3 mb-2">
          <li>
            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
              <p>Home</p>
            </a>
          </li>
          <li>
            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
            </svg>
          </li>
          <!-- todo fix link -->
          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">{{ page_type }}</a></li>
          <li>
            <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
            </svg>
          </li>
        </ul>
      </div>
    </div>
  </section>
  <section class="py-4">
    <div class="container px-4 mx-auto">
      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
        <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
        <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
        <div class="relative z-20 flex flex-wrap items-center">
          <div class="w-full md:w-1/2 p-3">
            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type }}</h2>
            <p class="font-semibold text-coolGray-200">{{ page_type_description }}</p>
          </div>
          <div class="{{ page_button }} w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
            <a id="refresh" href="/newoffer" class="flex flex-wrap justify-center px-5 py-4 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">
              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
                  <circle cx="5" cy="5" r="4"></circle>
                  <circle cx="19" cy="19" r="4"></circle>
                  <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline>
                  <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline>
                  <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline>
                  <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline>
                </g>
              </svg><span>Place new Offer</span></a>
          </div>
        </div>
      </div>
    </div>
  </section>
  {% include 'inc_messages.html' %}
  <section class="bg-white">
    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
      <div class="pb-6 border-coolGray-100">
        <div class="flex flex-wrap items-center justify-between -m-2">
          <div class="w-full pt-2">
            <!-- Chart-->
            {% if show_chart %}
            <div class="mb-10 mt-8">
              <div id="price-chart"></div>
              <script src="/static/js/chart.js"></script>
              <script>
                CryptoCharts.roiComparison({
                  chart_id: "price-chart",
                  cryptocompare_api_key: "{{chart_api_key}}",
                  cryptocompare_tickers: ["BTC", "PART", "DASH", "PIVX", "XMR", "LTC", "FIRO"],
                  last_days: 30,
                  axes: true,
                  title: true,
                  loading_indicator: false,
                  fontFamily: "Inter,Helvetica, Arial, sans-serif",
                  options: {
                    colors: ["#f2a900", "#2ad167", "#1376b5", "#662D91", "#fc6621", "#345D9D", "#9B1C2E"],
                    chart: {
                      type: "area",
                      height: 360
                    },
                    dataLabels: {
                      enabled: false
                    },
                    stroke: {
                      curve: "smooth"
                    },
                    xaxis: {
                      labels: {
                        style: {
                          tickAmount: 4,
                          // colors: colors,
                          fontSize: "12px"
                        }
                      }
                    },
                    yaxis: {
                      min: -100,
                      max: 200,
                      tickAmount: 4
                    },
                    grid: {
                      show: true,
                      borderColor: "#e5e5e5",
                      strokeDashArray: 0,
                      position: "back",
                      xaxis: {
                        lines: {
                          show: false
                        }
                      },
                      yaxis: {
                        lines: {
                          show: true
                        }
                      },
                      row: {
                        colors: undefined,
                        opacity: 0.5
                      },
                      column: {
                        colors: undefined,
                        opacity: 0.5
                      },
                      padding: {
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0
                      }
                    },
                    legend: {
                      show: true,
                      showForSingleSeries: false,
                      showForNullSeries: true,
                      showForZeroSeries: true,
                      position: "right",
                      horizontalAlign: "right",
                      floating: false,
                      fontSize: "14px",
                      fontFamily: "Inter,Helvetica, Arial, sans-serif",
                      fontWeight: 400,
                      formatter: undefined,
                      inverseOrder: false,
                      width: undefined,
                      height: undefined,
                      tooltipHoverFormatter: undefined,
                      customLegendItems: [],
                      offsetX: -20,
                      offsetY: -20,
                      labels: {
                        colors: undefined,
                        useSeriesColors: false
                      },
                      markers: {
                        width: 14,
                        height: 14,
                        strokeWidth: 2,
                        strokeColor: "#00000",
                        fillColors: undefined,
                        radius: 12,
                        customHTML: undefined,
                        onClick: undefined,
                        offsetX: 0,
                        offsetY: 0
                      },
                      itemMargin: {
                        horizontal: 5,
                        vertical: 15
                      },
                      onItemClick: {
                        toggleDataSeries: true
                      },
                      onItemHover: {
                        highlightDataSeries: true
                      }
                    },
                    annotations: {
                      yaxis: [{
                        y: 8600,
                        y2: 9000,
                        borderColor: "#000",
                        fillColor: "#FEB019",
                        label: {
                          text: "Y-axis range"
                        }
                      }]
                    },
                    markers: {
                      size: 0,
                      colors: undefined,
                      strokeColors: "#fff",
                      strokeWidth: 2,
                      strokeOpacity: 0.9,
                      strokeDashArray: 0,
                      fillOpacity: 1,
                      discrete: [],
                      shape: "circle",
                      radius: 2,
                      offsetX: 0,
                      offsetY: 0,
                      onClick: undefined,
                      onDblClick: undefined,
                      showNullDataPoints: true,
                      hover: {
                        size: undefined,
                        sizeOffset: 3
                      }
                    },
                    title: {
                      text: '30 Days Moving % - Daily price in USD',
                      align: 'left',
                      margin: 10,
                      offsetX: 10,
                      offsetY: 0,
                      floating: false,
                      style: {
                        fontSize: '14px',
                        fontWeight: 'bold',
                        fontFamily: "Inter,Helvetica, Arial, sans-serif",
                        color: '#212121'
                      },
                    }
                  }
                });
              </script>
            </div>
            <!-- Chart -->
            {% endif %}
            <form method="post">
              <div class="flex justify-between items-center pb-4 bg-white">
                <div class="bg-white bg-opacity-60 rounded-b-md">
                  <div class="w-full md:w-0/12">
                    <div class="flex flex-wrap justify-end -m-1.5">
                      <div class="w-full md:w-auto p-1.5">
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 " width="16 " height="16 " viewBox="0 0 16 16 " fill="none " xmlns="http://www.w3.org/2000/svg ">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z " fill="#8896AB "> </path>
                          </svg>
                          <select is="ms-dropdown" name="coin_from" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Any</option>
                            {% for c in coins_from %}
                            <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
                            {% endfor %}
                        </select>
                        </div>
                      </div>
                      <div class="flex items-center">
                        <div class="w-full md:w-auto p-1.5">
                          <p class="text-sm font-heading">
                            <svg aria-hidden="true " class="w-5 h-5 " fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
                              <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path>
                            </svg>
                          </p>
                        </div>
                      </div>
                      <div class="w-full md:w-auto p-1.5">
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <select is="ms-dropdown" name="coin_to" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Any</option>
                            {% for c in coins %}
                            <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
                            {% endfor %}
                        </select>
                        </div>
                      </div>
                      <div class="flex items-center">
                        <div class="w-full md:w-auto p-1.5">
                          <p class="text-sm font-heading bold">Sort By:</p>
                        </div>
                      </div>
                      <div class="w-full md:w-auto p-1.5">
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <select name="sort_by" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time Created</option>
                            <option value="rate" {% if filters.sort_by=='rate' %} selected{% endif %}>Rate</option>
                          </select>
                        </div>
                      </div>
                      <div class="w-full md:w-auto p-1.5">
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <select name="sort_dir" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
                            <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
                          </select>
                        </div>
                      </div>
                      <div class="flex items-center">
                        <div class="w-full md:w-auto p-1.5">
                          <p class="text-sm font-heading bold">Sent From Node:</p>
                        </div>
                      </div>
                      <div class="w-full md:w-auto p-1.5">
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <select name="sent_from" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="any" {% if filters.sent_from=='any' %} selected{% endif %}>Any</option>
                            <option value="only" {% if filters.sent_from=='only' %} selected{% endif %}>Only</option>
                          </select>
                        </div>
                      </div>
                      {% if sent_offers %}
                      <div class="flex items-center">
                        <div class="w-full md:w-auto p-1.5">
                          <p class="text-sm font-heading bold">State:</p>
                        </div>
                      </div>
                      <div class="w-full md:w-auto p-1.5">
                        <div class="relative">
                          <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"> </path>
                          </svg>
                          <select name="active" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="any" {% if filters.active=='any' %} selected{% endif %}>Any</option>
                            <option value="active" {% if filters.active=='active' %} selected{% endif %}>Active</option>
                            <option value="expired" {% if filters.active=='expired' %} selected{% endif %}>Expired</option>
                            <option value="revoked" {% if filters.active=='revoked' %} selected{% endif %}>Revoked</option>
                          </select>
                        </div>
                      </div>
                      {% endif %}
                      <div class="w-full md:w-auto p-1.5">
                        <div class="relative">
                          <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
                            <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round">
                                <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
                                <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
                                <line x1="18" y1="15" x2="23" y2="15" stroke="#556987"></line>
                                <line x1="17" y1="19" x2="23" y2="19" stroke="#556987"></line>
                                <line x1="19" y1="23" x2="23" y2="23" stroke="#556987"></line>
                                <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
                                <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
                                <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
                              </g>
                            </svg><span>Clear</span></button>
                        </div>
                      </div>
                      <div class="w-full md:w-auto p-1.5">
                        <div class="relative">
                          <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
                            <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round">
                                <rect x="2" y="2" width="7" height="7"></rect>
                                <rect x="15" y="15" width="7" height="7"></rect>
                                <rect x="2" y="15" width="7" height="7"></rect>
                                <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline>
                              </g>
                            </svg><span>Apply Filters</span></button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="container px-0 mx-auto mt-5">
                <div class="overflow-x-auto relative border sm:rounded-lg">
                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
                      <tr>
                        <th scope="col" class="py-3 px-6"> TIME AT </th>
                        <th scope="col" class="py-3 px-6"> Network </th>
                        <th scope="col" class="py-3 px-6"> Recipient </th>
                        <!--<th scope="col" class="py-3 px-6">ID</th>-->
                        <th scope="col" class="py-3">Swap Type</th>
                        <th scope="col" class="py-3"> You Get</th>
                        <th scope="col" class="py-3"></th>
                        <th scope="col" class="py-3"> You Send</th>
                        <th scope="col" class="py-3"></th>
                        <th scope="col" class="py-3 px-6"> Rate </th>
                        <!--Todo: Add swap + id back -->
                        <!--<th scope="col" class="py-3 px-6">Amount From Swapped </th>-->
                        <th scope="col" class="py-3 px-6"> Trade </th>
                      </tr>
                    </thead>
                    <tbody> {% for o in offers %}
                      <tr class="bg-white border-t hover:bg-gray-50">
                        <td scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
                          <svg alt="" class="w-5 h-5 rounded-full ml-5" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
                            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round">
                              <circle cx="12" cy="12" r="11"></circle>
                              <polyline points=" 12,6 12,12 18,12 " stroke="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}"></polyline>
                            </g>
                          </svg>
                          <div class="pl-3">
                            <div class="{% if o[11]==true or o[12]==2 %}text-coolGray-500{% else %}font-semibold{% endif %} text-xs">{{ o[0] }}</div>
                          </div>
                        </td>
                        <!--<td class="py-4 px-6 text-xs"><a class="monospace text-xs" href=/offer/{{ o[1] }}>{{ o[1]|truncate(6, True) }}</a></td>-->
                        <!--<td class="py-4 px-6 text-xs monospace">{{ o[8] }}{% if o[9]==true %} <b>Sent</b>{% endif %}</td>-->
                        <!--Todo: Add link back -->
                        <td class="py-4 px-6">{{ o[7] }} {% if o[12]==2 %}(Revoked){% elif o[11]==true %}(Not Active){% else %}(Active){% endif %}</td>
                        <td class="py-4 px-6 text-xs monospace"><a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a></td>
                        <td class="py-4 text-xs">{{ o[13] }}</td>
                        <td class="py-4"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
                        {% if o[9]==true %}
                        <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt=""></span> {{ o[3] }}</td>
                        <td class="py-4 text-xs">{{ o[5] }}</td>
                        {% else %}
                        <img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt=""></span> {{ o[2] }}</td>
                        <td class="py-4 text-xs">{{ o[4] }}</td>
                        {% endif %}
                        <td class="py-4"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
                        {% if o[9]==true %}
                        <img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt=""></span> {{ o[2] }}</td>
                        <td class="py-4 text-xs">{{ o[4] }}</td>
                        {% else %}
                        <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt=""></span> {{ o[3] }}</td>
                        <td class="py-4 text-xs">{{ o[5] }}</td>
                        {% endif %}
                        <td class="py-4 text-xs px-6">{{ o[6] }}</td>
                        <!--  <td class="py-4 px-6">{{ o[10] }}</td>-->
                        <td class="py-4 px-6"> <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button {% if o[9]==true %} bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 {% else %} bg-blue-500 text-white {% endif %}" href="/offer/{{ o[1] }}">{% if o[9]==true %}Edit{% else %}Swap{% endif %}</a> </td>
                      </tr>
                    </tbody>{% endfor %}
                  </table>
                  <input type="hidden" name="formid" value="{{ form_id }}">
                  <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </div>
              </div>
              <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
                <div class="w-full md:w-0/12">
                  <div class="flex flex-wrap justify-end -m-1.5">
                    <div class="w-full md:w-auto p-1.5">
                      <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
                        <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                        </svg><span>Page Back</span></button>
                    </div>
                    <div class="flex items-center">
                      <div class="w-full md:w-auto p-1.5">
                        <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
                      </div>
                    </div>
                    <div class="w-full md:w-auto p-1.5">
                      <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span>
                        <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
{% include 'footer.html' %}
</body>
</html>