{% extends "base.html" %} {% block content %}

<div class="title-container">
  <h1 class="title is-2">
    <a href="{{exchange['url']}}" target="_blank">
      {{exchange['name']}} <i class="fas fa-external-link-alt"></i>
    </a>
  </h2>
</div>

<div class="section header-section">
  <figure class="image is-128x128">
    <img
      class="is-rounded"
      src="../static/img/{{exchange['name'] | replace(' ', '') | lower}}.jpeg"
    />
  </figure>

  <div class="card score">
    <header class="card-header">
      <p
        class="card-header-title"
        style="background-color:{{color}} !important;"
      >
        {{exchange['score']}} KS
      </p>
    </header>
  </div>
</div>

<div class="section short-description-section">
  <div class="short-description">{{exchange['short-description']}}</div>
</div>

<div class="section quick-info-panel">
  <article class="panel is-info">
    <p class="panel-heading">Quick Info</p>
    <a class="panel-block">
      <span class="panel-icon">
        <i class="fab fa-bitcoin" aria-hidden="true"></i>
      </span>
      {% if exchange['btc'] %} BTC available {% else %}
      <p style="color: rgb(182, 78, 78)">BTC not available</p>
      {%endif%}
    </a>
    <a class="panel-block">
      <span class="panel-icon">
        <i class="fab fa-monero" aria-hidden="true"></i>
      </span>
      {% if exchange['xmr'] %} XMR available {% else %}
      <p style="color: rgb(182, 78, 78)">XMR not available</p>
      {%endif%}
    </a>
    <a class="panel-block">
      <span class="panel-icon">
        <i class="fas fa-dollar-sign"></i>
      </span>
      {% if exchange['buy'] %} You can buy with fiat {% else %}
      <p style="color: rgb(182, 78, 78)">You can't buy with FIAT</p>
      {%endif%}
    </a>
    <a class="panel-block">
      <span class="panel-icon">
        <i class="fas fa-random"></i>
      </span>
      {% if exchange['exchange'] %} Crypto exchange available {% else %}
      <p style="color: rgb(182, 78, 78)">Crypto exchange not available</p>
      {%endif%}
    </a>
    <a class="panel-block">
      <span class="panel-icon">
        <i class="fas fa-mask"></i>
      </span>
      {% if not exchange['registration'] %} No account needed {% else %}
      <p style="color: rgb(182, 78, 78)">Registration needed</p>
      {%endif%}
    </a>

    <a class="panel-block">
      <span class="panel-icon">
        <i class="far fa-handshake"></i>
      </span>
      {% if exchange['p2p'] %} P2P Exchange {% else %}
      <p style="color: rgb(185, 194, 20)">Non-P2P Exchange</p>
      {%endif%}
    </a>

    {% if exchange['tor'] %}
      <a href="{{exchange['tor-url']}}" class="panel-block">
        <span class="panel-icon">
          <i class="fas fa-bullseye"></i>
        </span>
        Tor available
      </a>
    {%endif%}
  </article>
</div>

<div class="title-container">
  <h2 class="title is-2">
    <a href="{{exchange['tos']}}" target="_blank">
      <i class="far fa-file-alt"></i> Detailed Info
      <i class="fas fa-external-link-alt"></i
    ></a>
  </h2>
</div>

<div class="section long-description-section">
  <article class="message long-description">
    <div class="message-header">
      <p>Description</p>
    </div>
    <div class="message-body">{{exchange['long-description']}}</div>
  </article>
</div>

<section class="detailed-info-section">
  <article class="message long-description">
    {% if exchange['verified'] == True %}
    <div class="message-header green">
      <p><i class="fas fa-user-check"></i> Verified</p>
    </div>
    {%else%}
    <div class="message-header yellow">
      <p><i class="fas fa-user-times"></i> Not verified</p>
    </div>
    {%endif%}
    <div class="message-body">
      {% if exchange['verified'] %} This is a trusted exchange. It has been
      tested by KYCNOT.ME or it has a long-time good reputation. {%else%} This
      exchange has not been tested by KYCNOT.ME or does not have it doesn't have
      a long or old enough good-review history. {%endif%}
    </div>
  </article>

  <article class="message long-description">
    {% if exchange['kyc-check'] == True %}
    <div class="message-header green">
      <p><i class="far fa-check-circle"></i> KYC Check</p>
    </div>
    {%else%}
    <div class="message-header yellow">
      <p><i class="far fa-times-circle"></i> KYC Check</p>
    </div>
    {%endif%}
    <div class="message-body">
      {% if exchange['kyc-check'] == True%} 
      <p>This exchange passes the automated KYCNOT.ME check. The ToS of this exchange seem <b>no-kyc</b> friendly. </p>
      {%else%} 
      <p> The automated KYCNOT.ME check has failed for this exchange. The exchange may require KYC for some cases or ToS may have changed since
      the listing and may need review. </p>
      
      {% if exchange['suspicious-tos'] %}
      <h3 class="title is-5" style="padding-top: 8px;"><strong> EXTRACTED SUSPICIOUS TOS: </strong></h3>
      <article class="message">
        <div class="message-body">
          {% for part in exchange['suspicious-tos'] %}
            <p style="margin: 10px;">{{part | safe}}</p>
          {% endfor %}
        </div>
      </article>
      {% endif %}
      {%endif%}
    </div>
  </article>

  <article class="message long-description">
    {% if exchange['kyc-type'] == 0 %} 
      <div class="message-header green">
    {% else %}
      <div class="message-header yellow">
    {% endif %}
      <p><i class="fas fa-theater-masks"></i> {{exchange['kyc-type']}} / 3 KYC</p>
    </div>
    <div class="message-body">
      {% if exchange['kyc-type'] == 0 %} 
         No KYC. The exchange ToS do not mention that it will ever request the user for a KYC verification.
      {% elif exchange['kyc-type'] == 1 %} 
         KYC is rare. The platform does not mention KYC/AML procedures as such, but the service has the right to share acquired data with representatives of the authorities and block funds or reject transactions.
      {% elif exchange['kyc-type'] == 2 %}
         The exchange may request KYC. Although KYC is not mandatory, the exchange reserves the right to require KYC for a certain user at a certain moment and may block funds. May be that a transaction is detected as suspicious or any other reason.
      {% elif exchange['kyc-type'] == 3 %}
         KYC is mandatory in order to use some features. Also, a non-KYCed user can be asked to verify their identity at any time or any moment for any reason.
      {% endif %}
    </div>
  </article>

  <article class="message long-description">
    {% if exchange['custodial'] %}
    <div class="message-header yellow">
      <p><i class="fas fa-lock"></i> Custodial Wallet</p>
    </div>
    {%else%}
    <div class="message-header green">
      <p><i class="fas fa-lock-open"></i> Non-Custodial Wallet</p>
    </div>
    {%endif%}
    <div class="message-body">
      {% if exchange['custodial'] %} The exchange provides you a wallet and
      controls the private key (aka seed/words/mnemonic) of it. {%else%} The
      exchange does not provide a wallet or it does not hold the private key.
      {%endif%}
    </div>
  </article>

  <article class="message long-description">
    {% if exchange['open-source'] %}
    <div class="message-header green">
      <p><i class="fas fa-code"></i> Open Source</p>
    </div>
    {%else%}
    <div class="message-header yellow">
      <p><i class="fas fa-box"></i> Not Open Source</p>
    </div>
    {%endif%}
    <div class="message-body">
      {% if exchange['open-source'] %} This service code is available for study.
      {%else%} This service's code is not available. {%endif%}
    </div>
  </article>

  {% if exchange['refunds'] %}
  <article class="message long-description">
    {% if exchange['refunds'] %}
    <div class="message-header green">
      <p><i class="fas fa-hand-holding-usd"></i> Refunds without KYC</p>
    </div>
    {%else%}
    <div class="message-header yellow">
      <p><i class="fas fa-times"></i> No Refunds</p>
    </div>
    {%endif%}
    <div class="message-body">
      {% if exchange['refunds'] %} You can get a refund without KYC.
      {%else%} You can't get refunds or refunds need KYC. {%endif%}
    </div>
  </article>
  {%endif%}
</section>

{% if exchange['tor-url'] %}
<div style="margin: 25px;" class="title-container">
  <h5 style="padding: 9px; border: 1px solid #9d52e9; border-radius: 5px; width: 10rem;" class="subtitle is-5">
      <a href="{{exchange['tor-url']}}"> <i class="fas fa-bullseye"></i> TOR ONION AVAILABLE </a>
    </h5>
  </div>
{% endif %}

<div style="padding-top: 20px; padding-bottom: 30px;" class="title-container">

  {% if exchange['tos-urls'][0] and exchange['tos-urls'][0] != -1 %}
  <h3 class="title is-4">
    <a href="{{exchange['tos-urls'][0]}}">
      <i style="font-size: large;" class="far fa-file-alt"></i> Read exchange Terms and Conditions
      <i class="fas fa-external-link-alt"></i
    ></a>
  </h3>
</div>
{% endif %}

<style>

  
  
  .title-container {
    display: flex;
    justify-content: center;
  }

  .title {
    margin-bottom: 10px;
  }

  .detailed-info-section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .message-header {
    font-size: large;
  }

  .yellow {
    background-color: rgb(182, 127, 8) !important;
  }

  .green {
    background-color: rgb(7, 136, 0) !important;
  }

  .red {
    background-color: rgb(182, 8, 8) !important;
  }

  .card-header-title {
    border-radius: 5px;
  }

  .header-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3px;
    padding-top: 3px;
    margin-bottom: 3px;
    padding-bottom: 3px;
  }

  .long-description-section {
    text-align: justify;
    display: flex;
    justify-content: center;
    padding-top: 2px;
  }

  .long-description {
    width: 80vw;
    max-width: 860px;
    margin: 10px;
  }

  .short-description-section {
    text-align: justify;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 3px;
  }

  .short-description {
    border-bottom: lightgrey solid 1px;
    max-width: 60vw;
  }

  .score {
    margin: 3vh;
    max-width: 15vh;
    max-height: 8vh;
    text-align: center;
  }

  .quick-info-panel {
    display: flex;
    justify-content: center;
  }

  .panel-block {
    text-align: center;
  }

  .panel {
    width: 80vh;
  }

  .panel-icon {
    font-size: x-large;
  }

  .fa-external-link-alt {
    font-size: small;
  }

  .fa-file-alt {
    font-size: xx-large;
  }
</style>

{% endblock %}