{% extends "base.html" %}
{% load static %}


{% block 'head' %}
<link rel="stylesheet" href="{% static 'mesas/css/mesas.css' %}">
<script src="{% static 'mesas/js/mesas_map.js' %}"></script>

{% endblock %}

{% block 'title' %}
RRB&C - Mapa de Mesas
{% endblock %}

{% block 'body' %}
{% csrf_token %}

<style>
    #mapa {
    width: 1400px;
    height: 800px;
    border-radius: 15px;
    margin-left: 30px;
    background-image: url("{% static 'midia/mapMesa.webp' %}" );
    background-size: cover;
    position: relative;

}

#scroll {
  display: grid;
  position: relative;
    scrollbar-width: thin;
}

@media screen and (max-width: 730px) {
  #scroll {
    margin: 10px;

    overflow: scroll;
}

#mapa {
  margin: 0px;

}

    }

</style>

<h1>Mapa de Mesas</h1>
<div id="scroll">
<div id="mapa" >

  {% for eixo in eixosXY %}
        <div 
        id="{{eixo.x}}-{{eixo.y}}" 
        class="espaco"
        style="background-color: rgba(0, 0, 255, 0); 
        width: 50px; 
        height: 50px; 
        left: {{eixo.y}}px;
        top: {{eixo.x}}px;position: absolute" >
      </div>
  {% endfor %}
</div>

</div>
<h2>Depósito</h2>
<div id="drop" >
  {% for mesa in mesas %}

  {% if mesa.active == True %}
  <div id="{{mesa.id}}" class="m-card" ondragend="saveLocal()" draggable="true" style="  background-color: indianred;"  >{{mesa.name}} <input type="text" hidden value="{{mesa.location}}"> </div>
   {% else %}
   <div id="{{mesa.id}}" class="m-card" ondragend="saveLocal()" draggable="true" > <span data-tooltip=" O id da mesa é:{{mesa.id}}" data-flow="top"> {{mesa.name}} </span><input type="text" hidden value="{{mesa.location}}"></div>
   {% endif %}
  
  {% endfor %}

</div>


{% endblock %}