{% extends "layout.html" %}

{% block title %}Edit kit {{kit}}{% endblock %}
{% block titleEmbed %}Edit kit {{kit}}{% endblock %}
{% block author %}Team PeekSeek{% endblock %}
{% block description %}Edit kit {{kit}} however you like with our built-in configurator.{% endblock %}
{% block color %}#ff0000{% endblock %}

{% block currentPage %}{{kit}}{% endblock %}

{% block script %}{{config.url()}}/public/src/kits.js{% endblock %}

{% block content %}

<div class="mainElement queue">
  <h1>Editing kit <b style="text-transform: uppercase; color: #f66;">{{kit}}</b></h1>

  <div class="mainSelector kitSelector" style="display: flex; flex-wrap: wrap; gap: 10px;">
    {% for id, z in kits.items() %}
        <div class="option{% if id == currentSelection["gun"]|string %} optionselected{% endif %}">
            <img src="{{config.url()}}/public/unturned/{{id}}.png" alt="" style="max-width: 200px;">
        </div>
    {% endfor %}
  </div>

  <img id="showImg" src="{{config.url()}}/public/unturned/{{currentSelection["gun"]}}.png" width="30%" alt="">
  <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; width: min(90%, 315px);">
    {% for attachmentOption in ["sight", "tactical", "grip", "barrel"] %}
    <div class="subSelector kitSelector" style="padding: 0 8px;">
      {% for attachment in kits[currentSelection["gun"]|string][attachmentOption] %}
          <div class="option{% if y == currentSelection[x] %} optionselected{% endif %}" style="margin-bottom: 20px;">
              <img src="{{config.url()}}/public/unturned/{{attachment}}.png" alt="" style="max-height: 14px; max-width: 14px;">
          </div>
      {% endfor %}
    </div>
    {% endfor %}
  </div>
</div>

<script type="text/javascript">
  let configUrl = "{{ config.url() }}";
  let kit = "{{ kit }}";
  let kits = {{ kits | safe }};
  let order = {{ order | safe }};
  let currentSelection = {{ currentSelection | safe }};
</script>

{% endblock %}