<div class="row" style="text-transform:uppercase;">
    <div class="col-xs-5" style="text-align:center;">
        <h3 class="lead" style="font-size:30px;">Seleccione un plan:</h3>
    </div>
    <div class="col-xs-7" style="padding-top:25px;">
        {% for plan in Planes  %}
            <button class="btn btn-default botones" id="codigoPlan-{{plan.planID}}" onclick="cargarDatosPlan({{plan.planID}})">{{plan.planCODIGO}}</button>
    {% endfor %}
    </div>
</div>
<div class="box box-info box-solid" style="text-transform:uppercase;">
    <div class="box-header with-border bg-aqua">
        <h3 class="box-title ">Detalles del Plan:</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
    </div>
    <div class="box-body">
        <div class="row">
            <div class="col-md-6" id="div-datosPlan{{hash_vista}}"></div>
            <div class="col-md-6" id="div-estadisticas{{hash_vista}}"></div>
        </div>
    </div>
</div> 
<div class="box box-info box-solid collapsed-box" style="text-transform:uppercase;">
    <div class="box-header with-border">
        <h3 class="box-title">Arbol del Plan:</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
        </div>
    </div>
    <div class="box-body" style="display: none;">
        <div class="row">
            <div id="div-arbolPlanYDetalles{{hash_vista}}"></div>
        </div>
    </div>
</div>
      
<script type="text/javascript">
    
    function cargarDatosPlan(planID){
        $('.botones').removeClass("active");
        $('.botones').removeAttr("style");
        $("#codigoPlan-"+planID).addClass("active");
        $("#codigoPlan-"+planID).attr("style","background:#00c0ef; color:#fff; border-color:#00c0ef;");
        cargarDetallesPlan(planID);
        cargarEstadisticasPlan(planID);
        cargarArbolPlan(planID);
    }
    
    function cargarDetallesPlan(planID) {
        cargarDivisionSicam('div-datosPlan{{hash_vista}}', 'planeador', 'Planes', 'detallesPlan', 'planID=' + planID);
    }
    
    function cargarEstadisticasPlan(planID) {
        cargarDivisionSicam('div-estadisticas{{hash_vista}}', 'planeador', 'Planes', 'estadisticasPlan', 'planID=' + planID);
    }
    
    function cargarArbolPlan(planID) {
        cargarDivisionSicam('div-arbolPlanYDetalles{{hash_vista}}', 'planeador', 'Planes', 'arbolPlan', 'planID=' + planID);
    }

</script>