{% extends "master-administracion.html" %}


{% block body %}


<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Roles</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{assets}}Administracion/">Administración</a></li>
                    <li class="breadcrumb-item active">Roles</li>
                </ol>
            </div>

        </div>
    </div>
</div>
<!-- end page title -->




<!--Begin row -->
<div class="row">
    <div class="col-lg-12">
        
        <div class="row row-cols-xxl-5 row-cols-lg-3 row-cols-md-2 row-cols-1">

            {% for rol in roles %}

            {% if rol.tipo == 'INSTITUCION' %}
            <div class="col">
                <div class="card">
                    <div class="card-body text-center mt-n3">
                        <div class="p-3 mt-n3 mx-n3 rounded-top" style="background-color: #126FB7;">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1">
                                    <h5 class="mb-0 fs-14 text-white">{{rol.tipo}}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                        <!--<lord-icon src="https://cdn.lordicon.com/dklbhvrt.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>-->
                        <img src="{{assets}}images/svg/{{rol.imagen}}" height="60" />
                        <a href="../Permisos/Index/{{rol.id}}" class="stretched-link">
                            <h5 class="mt-4">{{rol.rol}}</h5>
                        </a>
                        </div>
                    </div>
                </div>
            </div>

            {% endif %}
            {% endfor %}

        </div>

    </div>
    <!--end col-->
</div>
<!--end row-->




<!--Begin row -->

<div class="row">
    <div class="col-lg-12">
        
        <div class="row row-cols-xxl-5 row-cols-lg-3 row-cols-md-2 row-cols-1">

            {% for rol in roles %}

            {% if rol.tipo == 'FIMPES' %}
            <div class="col">
                <div class="card">
                    <div class="card-body text-center">

                        <div class="p-3 mt-n3 mx-n3 rounded-top" style="background-color: #36477F;">
                            <div class="d-flex align-items-center">
                                <div class="flex-grow-1">
                                    <h5 class="mb-0 fs-14 text-white">{{rol.tipo}}</h5>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                        <!--<lord-icon src="https://cdn.lordicon.com/dklbhvrt.json" trigger="hover" colors="primary:#405189" target="div" style="width:50px;height:50px"></lord-icon>-->
                        <img src="{{assets}}images/svg/{{rol.imagen}}" height="60" />
                        <a href="../Permisos/Index/{{rol.id}}" class="stretched-link">
                            <h5 class="mt-4">{{rol.rol}}</h5>
                        </a>
                        
                        </div>
                    </div>
                </div>
            </div>

            {% endif %}
            {% endfor %}

        </div>

    </div>
    <!--end col-->
</div>
<!--end row-->

                    

{% endblock %}