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

<div>
    <a ng-href="#!/CrearStakeholder" class="ui green left floated button">
        <i class="calendar plus outline icon"></i>
        Crear stakeholder</a>


    <button type="button" class="ui blue left floated button" ng-click="obtenerStakeholders()">
        <i class="refresh icon"></i>
        Actualizar</button>


</div>
<br>
<br>

<br>

<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>
            <th style="color: white;
                    background-color: #0F3282;
                    width: 50px">
            </th>

            <th style="color: white;
                    background-color: #0F3282;
                    width: 50px">
                <h4># ID</h4>
            </th>

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

            <th style="color: white; background-color: #0F3282; width: 15%;">
                Rol
                <br>
                <div class="ui input">
                    <input ng-model="filtro.Telefono" type="text" placeholder="Filtro">
                </div>
            </th>

            <th style="color: white; background-color: #0F3282; width: 10%;">
                Modificado por
                <br>
                <div class="ui input">
                    <input ng-model="filtro.Editor.Title" type="text" placeholder="Filtro">
                </div>
            </th>



            <th style="color: white; background-color: #0F3282; width: 10%;">
                Tipo
                <br>
                <div class="ui input">
                    <input ng-model="filtro.Tipoo" type="text" placeholder="Filtro">
                </div>
            </th>



            <!-- <th style=" color: white; background-color: #0F3282 ;">
                Zona
                <br>
                <select ng-model="filtro.Operacion" style="    padding: 6px 12px !important;
                border-radius: .28571429rem;
                height: 30px;
                background-color: white;
                color: rgba(0, 0, 0, 0.87);">
                    <option value=""></option>
                    <option ng-repeat="option in zonasUsuario" value="{{option.zona}}">{{option.zona}}</option>
                </select>
            </th>

            <th style="color: white; background-color: #0F3282;">
                Comuna
                <br>
                <select ng-model="filtro.Comuna" style="    padding: 6px 12px !important;
                border-radius: .28571429rem;
                height: 30px;
                background-color: white;
                color: rgba(0, 0, 0, 0.87);">
                    <option value="">Todos</option>
                    <option ng-repeat="option in comunas" value="{{option.Valor}}">{{option.Valor}}</option>
                </select>
            </th> -->

            <th style=" color: white; background-color: #0F3282 ;width: 10%;">
                Zona
                <br>
                <!-- <select ng-model="filtro.Operacion" ng-disabled="bloqueo" class="form-control"
                    ng-options="item.zona as item.zona for item in zonasUsuario" name="Operacion"
                    ng-change="obtenerComunasUsuario(filtro.Operacion)"
                    style="padding: 6px 12px !important; border-radius: .28571429rem; height: 30px; background-color: white; color: rgba(0, 0, 0, 0.87);">
                </select> -->

                <!-- obtenerComunasUsuario -->
                <select ng-model="filtro.Operacion"
                    style="padding: 6px 12px !important; border-radius: .28571429rem; height: 30px;    width: 110px; background-color: white; color: rgba(0, 0, 0, 0.87);"
                    ng-change="obtenerComunasUsuario(filtro.Operacion)">
                    <option value="">Todos</option>
                    <option ng-repeat="option in zonasUsuario" value="{{option.zona}}">{{option.zona}}
                    </option>
                </select>

            </th>

            <th style="color: white; background-color: #0F3282 ;  width: 10%;">
                Comuna
                <br>
                <select ng-model="filtro.Comuna"
                    style="padding: 6px 12px !important; border-radius: .28571429rem; height: 30px; background-color: white; color: rgba(0, 0, 0, 0.87);">
                    <option value="">Todos</option>
                    <option ng-repeat="option in comunasUsuarioData" value="{{option.Comuna}}">{{option.Comuna}}
                    </option>
                </select>
            </th>


            <th style="color: white; background-color: #0F3282 ;width: 40px " ng-show="isAdmin"></th>
        </tr>

    </thead>
    <tbody>
        <tr ng-repeat="datos in filterData = (stakeholdersData | filter: filtro)">
            <td style="vertical-align: middle">
                <i class="thumbs up outline icon center" style="color: green;" ng-show="datos.Relevancia =='Alta'"></i>
                <i class="thumbs down outline icon center" style="color: red;" ng-show="datos.Relevancia =='Baja'"></i>
            </td>

            <td style="vertical-align: middle">            
                {{datos.ID}}</td>
            <td style="vertical-align: middle">
                <a ng-href="#!/Stakeholder/{{datos.Id}}"><i class="share icon"></i> {{datos.Title}}</a>
            </td>
            <td style="vertical-align: middle">{{datos.Rol}}</td>
            <td style="vertical-align: middle">{{datos.Editor.Title}}</td>
            <td style="vertical-align: middle">{{datos.Tipoo}}</td>
            
            <td style="vertical-align: middle">{{datos.Operacion}}</td>
            <td>{{datos.Comuna}}
                <span ng-show="datos.Comuna == 'Otra'">({{datos.OtraComuna}})</span>
            </td>

            <td style="padding-right: 0px;" ng-show="isAdmin">
                <button class="ui icon tiny red button" type="button" style="min-width: 25px; padding: 4px 3px;"
                    ng-click="eliminarStakeholder(datos.ID)">
                    <i class="trash alternate icon"></i>
                </button>
            </td>

        </tr>
    </tbody>
</table>
