{% extends "base.html" %}
{% block titel %}Faceit Elo Search by HerZ{% endblock %}
{% block content %}
<div class="input-group">
{%for steamid in steamids%}
<div class="card" style="width: 18rem;">
  <img class="Steam-PB" src="{{steam_pic_dict[steamid]}}" alt="Card image cap">
  <div class="card-body">
    <h5 class="STeam-Name">{{steam_name_dict[steamid]}}</h5>
    <p class="FaceIT-IMG">
      {% if faceit_level_dict[steamid] == 1 %}
        <img src="/static/faceit1.svg" alt="FaceIT Level 1" width="100" height="100">
      {% elif faceit_level_dict[steamid] == 2 %}
      <img src="/static/faceit2.svg" alt="FaceIT Level 2" width="100" height="100">
      {% elif faceit_level_dict[steamid] == 3 %}
      <img src="/static/faceit3.svg" alt="FaceIT Level 3" width="100" height="100">
      {% elif faceit_level_dict[steamid] == 4 %}
      <img src="/static/faceit4.svg" alt="FaceIT Level 4" width="100" height="100">
      {% elif faceit_level_dict[steamid] == 5 %}
      <img src="/static/faceit5.svg" alt="FaceIT Level 5" width="100" height="100">
      {% elif faceit_level_dict[steamid] == 6 %}
      <img src="/static/faceit6.svg" alt="FaceIT Level 6" width="100" height="100">
      {% elif faceit_level_dict[steamid] == 7 %}
      <img src="/static/faceit7.svg" alt="FaceIT Level 7" width="100" height="100">
      {% elif faceit_level_dict[steamid] == 8 %}
      <img src="/static/faceit8.svg" alt="FaceIT Level 8" width="100" height="100">
      {% elif faceit_level_dict[steamid] == 9 %}
      <img src="/static/faceit9.svg" alt="FaceIT Level 9" width="100" height="100">
      {% elif faceit_level_dict[steamid] == 10 %}
      <img src="/static/faceit10.svg" alt="FaceIT Level 10" width="100" height="100">
      {% else %}
      <p>No FaceIT Account Found.</p>
      {% endif %}
    </p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
{%endfor%}
{% endblock %}