{include="header"}

<script type="text/javascript">
    $(document).ready(function () {
        $("#b_nuevo_clan").click(function (event) {
            event.preventDefault();
            $("#modal_nuevo_clan").modal('show');
            document.f_nuevo_clan.nombre.focus();
        });
    });
</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <h1>
                <i class="fa fa-users"></i>&nbsp;
                Clanes familiares
                <a href="{$fsc->url()}" class="btn btn-xs btn-default">
                    <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                </a>
                <a href="#nuevo" id="b_nuevo_clan" class="btn btn-xs btn-success">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span class="hidden-xs">&nbsp;Nuevo</span>
                </a>
            </h1>
            <p class="help-block">
                Un clan familiar es una familia o grupo a la que se le asigna un presupuesto
                máximo para gastar en el supermercado solidario.
            </p>
            <form method="post">
                <div class="input-group">
                    <input type="text" name="query" value="{$fsc->query}" class="form-control" placeholder="Buscar..." />
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit">Buscar</button>
                    </span>
                </div>
            </form>
            <br/>
        </div>
    </div>
    <div class="row">
        {loop="$fsc->clanes"}
        <div class="col-sm-3" style="margin-bottom: 10px;">
            <a href="{$value->url()}" class="btn btn-block btn-sm btn-default">
                <i class="fa fa-users"></i>&nbsp; {$value->nombre}
            </a>
        </div>
        {else}
        <div class="col-sm-12">
            <div class="alert alert-warning">Sin resultados.</div>
        </div>
        {/loop}
    </div>
</div>

<div class="modal" id="modal_nuevo_clan">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Nuevo clan familiar</h4>
            </div>
            <form id="f_nuevo_clan" name="f_nuevo_clan" action="{$fsc->url()}" method="post" class="form">
                <div class="modal-body">
                    <div class="form-group">
                        <input class="form-control" type="text" name="nombre" placeholder="Nombre" autocomplete="off"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-primary" type="submit">
                        <span class="glyphicon glyphicon-floppy-disk"></span>&nbsp; Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{include="footer"}