<div class="container span12">
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input ng-model="q.name" type="text" class="form-control" placeholder="Principio activo">
      </div>
    </form>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input  ng-model="value" type="number" class="form-control" placeholder="FGe" min="0" max="200"/>
      </div>
    </form>
    <p class="navbar-left navbar-text">
        En caso de no seleccionar un FGe, saldr&aacute; todo
    </p>
    <!--
    <label class="checkbox navbar-left" ng-controller="AccordionDemoCtrl">
        <input type="checkbox" ng-model="oneAtATime" />Desplegar solo un principio Activo
    </label>-->
</div>

<div class="progress">
    <div class="progress-bar progress-bar-risk1" style="width: 25%">
        <span class="sr-only">Muy bajo</span>Muy bajo
    </div>
    <div class="progress-bar progress-bar-risk2" style="width: 25%">
        <span class="sr-only">Bajo</span>Bajo
    </div>
    <div class="progress-bar progress-bar-risk3" style="width: 25%">
        <span class="sr-only">Medio</span>Medio
    </div>
    <div class="progress-bar progress-bar-risk4" style="width: 25%">
        <span class="sr-only">Alto</span>Alto
    </div>
</div>

<div ng-controller="AccordionDemoCtrl">
    <accordion close-others="oneAtATime">
        <accordion-group heading="{{activeIngredient.name}}" ng-repeat="activeIngredient in activeIngredients | filter:q | orderBy : 'name'">
            <ul class="list-group">
                <div ng-hide="value || value == 0">
                    <li class="list-group-item" ng-hide="!activeIngredient.counterIndication || activeIngredient.counterIndication=='-'">
                        <h4 class="list-group-item-heading">Contraindicaci&oacute;n</h4>
                        {{activeIngredient.counterIndication}}</li>
                    <li class="list-group-item" ng-hide="!activeIngredient.caution || activeIngredient.caution=='-'">
                        <h4 class="list-group-item-heading">Precauci&oacute;n</h4>
                        {{activeIngredient.caution}}</li>
                    <li class="list-group-item" ng-hide="!activeIngredient.monitoringYes || activeIngredient.monitoringYes=='-'">
                        <h4 class="list-group-item-heading">Monitorizar</h4>
                        {{activeIngredient.monitoringYes}}</li>
                    <li class="list-group-item" ng-hide="!activeIngredient.monitoringNo || activeIngredient.monitoringNo=='-'">
                        <h4 class="list-group-item-heading">No monitorizar</h4>
                        {{activeIngredient.monitoringNo}}</li>
                    <li class="list-group-item" ng-hide="!activeIngredient.adjustmentsYes || activeIngredient.adjustmentsYes=='-'">
                        <h4 class="list-group-item-heading">Ajustes</h4>
                        {{activeIngredient.adjustmentsYes}}</li>
                    <li class="list-group-item" ng-hide="!activeIngredient.adjustmentsNo || activeIngredient.adjustmentsNo=='-'">
                        <h4 class="list-group-item-heading">No requiere ajustes</h4>
                        {{activeIngredient.adjustmentsNo}}</li>
                    <li class="list-group-item" ng-hide="!activeIngredient.symptoms || activeIngredient.symptoms=='-'">
                        <h4 class="list-group-item-heading">S&iacute;ntomas de lesi&oacute;n renal o sobredosificaci&oacute;n</h4>
                        {{activeIngredient.symptoms}}</li>
                    <br>
                </div>
                Recomendaciones seg&uacute;n la capacidad de filtraje:
                <br>
                <ul class="list-group">
                    <li ng-repeat="rec in activeIngredient.recomendations.entries | rangeFilter:value | orderBy : 'risk' : reverse" class="list-group-item" 
                        ng-class="{ 'list-group-item-risk1':rec.risk==1,
                                    'list-group-item-risk2':rec.risk==2,
                                    'list-group-item-risk3':rec.risk==3,
                                    'list-group-item-risk4':rec.risk==4
                        }">
                        <h4 class="list-group-item-heading">{{rec.glomerularFiltrationRateRange}}</h3>
                        <div ng-hide="!rec.risk">
                                <b class="list-group-item-heading">Nivel de riesgo</b>
                                <p style="padding-left:1%">{{rec.risk}}</p>
                            </div>
                            <br>
                            <div ng-hide="!rec.adjustDose">
                                <b class="list-group-item-heading">Ajuste de dosis</b>
                                <p style="padding-left:1%">{{rec.adjustDose}}</p>
                            </div>
                            <br>
                            <div ng-hide="!rec.clinicalCare">
                                <b class="list-group-item-heading">Seguimento cl&iacute;nico</b>
                                <p style="padding-left:1%">{{rec.clinicalCare}}</p>
                            </div>
                    </li>
                </ul>
                <!--<b>Opci&oacute; 2:</b>
                <div ng-repeat="rec in activeIngredient.recomendations.entries | rangeFilter:value | orderBy : 'risk' : reverse">
                    <div class="panel" ng-class="{ 'panel-success':rec.risk==1,
                                    'panel-info':rec.risk==2,
                                    'panel-warning':rec.risk==3,
                                    'panel-danger':rec.risk==4
                        }">
                        <div class="panel-heading">
                          <h3 id="panel-title" class="panel-title">{{rec.glomerularFiltrationRateRange}}</h3>
                        </div>
                        <div class="panel-body">
                            <li class="list-group-item" ng-hide="!rec.risk">
                                <h4 class="list-group-item-heading">Nivel de riesgo</h4>
                                {{rec.risk}}
                            </li>
                            <li class="list-group-item" ng-hide="!rec.adjustDose">
                                <h4 class="list-group-item-heading">Ajuste de dosis</h4>
                                {{rec.adjustDose}}
                            </li>
                            <li class="list-group-item" ng-hide="!rec.clinicalCare">
                                <h4 class="list-group-item-heading">Seguimento cl&iacute;nico</h4>
                                {{rec.clinicalCare}}
                            </li>
                        </div>
                    </div>
                </div>
                <b>Opci&oacute; 3:</b>
                <div ng-repeat="rec in activeIngredient.recomendations.entries | rangeFilter:value | orderBy : 'risk' : reverse">
                    <div class="panel" ng-class="{ 'panel-success':rec.risk==1,
                                    'panel-info':rec.risk==2,
                                    'panel-warning':rec.risk==3,
                                    'panel-danger':rec.risk==4
                        }">
                        <div class="panel-heading">
                            <h3 id="panel-title" class="panel-title">{{rec.glomerularFiltrationRateRange}}</h3>
                        </div>
                        <div class="panel-body">
                            <div ng-hide="!rec.risk">
                                <h4 class="list-group-item-heading">Nivel de riesgo</h4>
                                <p style="padding-left:1%">{{rec.risk}}</p>
                            </div>
                            <br>
                            <div ng-hide="!rec.adjustDose">
                                <h4 class="list-group-item-heading">Ajuste de dosis</h4>
                                <p style="padding-left:1%">{{rec.adjustDose}}</p>
                            </div>
                            <br>
                            <div ng-hide="!rec.clinicalCare">
                                <h4 class="list-group-item-heading">Seguimento cl&iacute;nico</h4>
                                <p style="padding-left:1%">{{rec.clinicalCare}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            -->    
            </ul>
        </accordion-group>
        <accordion-group heading="Sugerencias" ng-hide="isTempUser()">
                En caso de no encontrar en esta gu&iacute;a alg&uacute;n principio activo, ind&iacute;quelo en este cuadro para pr&oacute;ximas actualizaciones.
                <form ng-submit="sendMessage()" ng-controller="MessageCtrl">
                    <div class="form-group">
                        <textarea rows="4" cols="50" name="comment1" form="usrform1" ng-model="message.messageText">
                            Escriba aqu&iacute; el mensaje
                        </textarea>
                    </div>
                    <button class="btn btn-success" type="submit">Mandar mensaje</button>
                </form>
        </accordion-group>
    </accordion>
</div>