<h3 class="ui header" style="padding-top: 20px;">
    LISTADO DE ACTIVIDADES</h3>
<div class="ui divider"></div>

<div id="actions" class="">

    <button type="button" class="ui blue right floated button" ng-click="obtenerAsuntos()" style="margin-top: 20px;">
        <i class="refresh icon"></i>
        Actualizar</button>
</div>

<!-- Encabezado de busqueda -->
<div class="row justify-content-md-left">
    <div class="col col-lg-3">
        <div class="form-group">
            <label for="formGroupExampleInput">Desde</label>
            <input type="date" class="form-control" id="formGroupExampleInput" ng-model="asuntosFiltroDesde">
        </div>
    </div>

    <div class="col col-lg-3">
        <div class="form-group">
            <label for="formGroupExampleInput">Hasta</label>
            <input type="date" class="form-control" id="formGroupExampleInput" ng-model="asuntosFiltroHasta">
        </div>
    </div>

    <div class="col col-lg-2">
        <div class="form-group">
            <label for="formGroupExampleInput">&nbsp;</label>
            <button type="button" class="form-control ui right labeled icon button blue" ng-click="filtrarAsuntos()">
                <i class="search icon"></i>
                Filtrar
            </button>
        </div>
    </div>
</div>

<span style="font-size: 12px;">Total de registros {{filterData.length}}</span>
<table class="ui fixed table" style="margin-top: 0px; border-top: none;">
    <thead>
        <tr>
            <!-- ID -->
            <th style=" color: white;
                    background-color: #0F3282 ;
                    width: 50px;">
                # ID
            </th>

            <!-- NOMBRE ACTIVIDAD -->
            <th style="color: white; background-color: #0F3282 ;  width: 200px ">
                Nombre actividad
                <br>
                <div class="ui input">
                    <input ng-model="filtro.Title" type="text" placeholder="Filtro" capitalize>
                </div>
            </th>

            <!-- FECHA MODIFICACION -->
            <th style=" color: white; background-color: #0F3282 ; width: 90px">
                Fecha
            </th>

            <!-- DESCRIPCION -->
            <th style=" color: white; background-color: #0F3282 ;">
                Descripcion
            </th>

            <!-- OPERACION -->
            <th style=" color: white; background-color: #0F3282 ; width: 100px">
                Operacion
            </th>

            <!-- COMUNA -->
            <th style=" color: white; background-color: #0F3282 ; width: 100px">
                Comuna
            </th>

            <!-- PARTICIPANTES -->
            <th style=" color: white; background-color: #0F3282 ; width: 80px">
                Partici.
            </th>

            <!-- GASTADO -->
            <th style=" color: white; background-color: #0F3282 ; width: 80px">
                Gastado
            </th>

            <!-- ASUNTO -->
            <th style=" color: white; background-color: #0F3282 ; width: 200px">
                Asunto
            </th>

            <!-- STAKEHOLDERS -->
            <!-- <th style=" color: white; background-color: #0F3282 ; width: 200px">
                Stakeholders
            </th> -->
        </tr>

    </thead>
    <tbody>
        <tr ng-repeat="datos in filterData = (AccionesData | filter: filtro)">
            <td style="vertical-align: middle">{{datos.ID}}</td>
            <td style="vertical-align: middle">{{datos.Title}}</td>
            <td style="vertical-align: middle">{{datos.Modified | date: "dd-MM-yyyy"}}</td>
            <td style="vertical-align: middle">{{datos.Descripcion}}</td>
            <td style="vertical-align: middle">{{datos.Operacion}}</td>
            <td style="vertical-align: middle">{{datos.Comuna}}
                <span ng-show="datos.Comuna == 'Otra'">( {{datos.OtraComuna}} )</span>
            </td>
            <td style="vertical-align: middle">{{datos.Participantes}}</td>
            <td style="vertical-align: middle">{{datos.Gastado | currency}}</td>

            <td style="vertical-align: middle">
                <a ng-href="#!/Asunto/{{datos.AsuntoId}}"><i class="share icon"></i> {{datos.Asunto.Title}}</a>
            </td>
           
            <!-- <td style="vertical-align: middle">
                <span ng-repeat="item in datos.StakeholdersArray">
                    <a ng-href="#!/Stakeholder/{{item.StakeholderId}}"><i class="share icon"></i> {{item.Nombre}}</a>
                    <br>
                </span>
            </td> -->
        </tr>
    </tbody>
</table>