{% extends 'base.html' %}

{% block title %}
    {{object}} | Sistemas
{% endblock title %}
    

{% block content %}
<style>
    @import url('https://fonts.googleapis.com/css?family=Assistant');

body {
    background: #eee;
    font-family: Assistant, sans-serif
}

.cell-1 {
  border-collapse: separate;
  border-spacing: 0 4em;
  background: #ffffff;
  border-bottom: 5px solid transparent;
  /*background-color: gold;*/
  background-clip: padding-box;
  cursor: pointer;
}

thead {
  background: #dddcdc;
}


.table-elipse {
  cursor: pointer;
}

#demo {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s 0.1s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.row-child {
  background-color: rgb(113, 178, 238);
  color: rgb(0, 0, 0);
}
</style>



<h1>{{object.cliente}}</h1>        

<div class="table-responsive table-borderless">
    <table class="table">
        <thead>
            <tr>
                <th class="text-center">Num. Licencias contratadas</th>
                <th>Sistema</th>
                <th>-</th>
                <th>Estatus</th>
                <th>-</th>
                <th>-</th>
                <th></th>
            </tr>
        </thead>
        <tbody class="table-body">
            <tr class="cell-1" data-toggle="collapse" data-target="#demo">
                <td class="text-center">{{object.num_licencias}}</td>
                <td>{{object.id_sistema}}</td>
                <td>-</td>
                <td><span class="badge badge-{% if object.cliente.Activo %}success{%else%}danger{% endif %}">{% if object.cliente.Activo %}Activo{%else%}Inactivo{% endif %}</span></td>
                <td>-</td>
                <td>click me</td>
                <td class="table-elipse" data-toggle="collapse" data-target="#demo"><i class="fa fa-ellipsis-h text-black-50"></i></td>
            </tr>                             
            {% for device in devices %}
            <tr id="demo" class="collapse cell-1 row-child">
                <td class="text-center" colspan="1"><i class="fa fa-angle-up"></i></td>
                <td colspan="1">Dispositivo: <strong>{{ device }}</strong> </td>
                <td colspan="3"></td>
                <td colspan="1">-</td>
                <td colspan="2">-</td>
            </tr>
            {% endfor %}   
        </tbody>
    </table>
</div>      
{% endblock content %}