{% 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: 15; */

    background-image: url("{% static 'midia/mapMesa.webp' %}" );
    background-size: cover;
    position: relative;
}
</style>

<h1>Mapa de Mesas</h1>

<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>
<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" >{{mesa.name}} <input type="text" hidden value="{{mesa.location}}"></div>
   {% endif %}
  
  {% endfor %}

</div>


{% endblock %}