<div class="modal-body">
    <h4 class="ui horizontal divider header">
        <i class="info icon"></i>
        INFORMACIÓN DE LA ACTIVIDAD - ID # {{idActividad}}
    </h4>
    <form class="ui form" name="frmActividades" novalidate ng-submit="grabarActividad()">
        <div class="two fields">
            <div class="required field" ng-class="{error: !frmActividades.nombreActividad.$valid}">
                <label>Nombre</label>
                <input ng-model="actividad.Title" type="text" name="nombreActividad" placeholder="" required capitalize>
            </div>

            <div class="required field" ng-class="{error: !frmActividades.FechaActividad.$valid}">
                <label>Fecha</label>
                <input ng-model="actividad.FechaActividad" type="date" name="FechaActividad" placeholder=""
                    style="height: 31px" required>
            </div>
        </div>


        <!-- ZONA - COMUNA -->
        <div class="two fields">
            <div class="field">
                <label>Zona</label>
                {{actividad.Operacion}}
            </div>

            <div class="required field">
                <label>Comuna</label>
                <select ng-model="actividad.Comuna" class="form-control">
                    <option ng-repeat="item in comunasUsuarioData" value="{{item.Comuna}}">{{item.Comuna}}</option>
                </select>
            </div>
        </div>

        <!-- Otra comuna -->
        <div class="two fields" ng-show="actividad.Comuna.Comuna == 'Otra' || actividad.Comuna == 'Otra'">
            <div class="field">
                <label>Nombre comuna</label>
                <input ng-model="actividad.OtraComuna" type="text" name="" placeholder="" capitalize>
            </div>
        </div>


        <div class="two fields">
            <div class="field">
                <label>Participantes</label>
                <input ng-model="actividad.Participantes" type="number" name="" placeholder="">
            </div>

            <div class="field">
                <label>Presupuesto gastado</label>
                <input ng-model="actividad.Gastado" type="number" name="" placeholder="">
            </div>

        </div>


        <div class="required field" ng-class="{error: !frmActividades.Descripcion.$valid}">
            <label>Descripción</label>
            <textarea ng-model="actividad.Descripcion" rows="4" type="text" name="Descripcion" placeholder="" required
                capitalize></textarea>
        </div>


        <!-- SECCION STAKEHOLDERS  -->
        <h4 class="ui horizontal divider header">
            <i class="users icon"></i>
            Stakeholders
        </h4>

        <!-- Buscador de stackeholders  -->
        <p>Selected ID: {{person.selected.ID}}</p>
        <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 70%;" title="">
            <ui-select-match placeholder="Seleccione un Stakeholder">{{$select.selected.Title}}</ui-select-match>
            <ui-select-choices repeat="person in people | propsFilter: {Title: $select.search}">
                <div ng-bind-html="person.Title | highlight: $select.search"></div>
                <small>
                    Rol: {{person.Rol}} | Categoria: {{person.Tipoo}}
                </small>
            </ui-select-choices>
        </ui-select>

        <button ng-disabled="person.selected == null" type="button" class="ui green right floated button"
            ng-show="editarActividad == false"
            ng-click="AgregarStakeholderActividad(person.selected.ID, person.selected.Title, person.selected.Rol, person.selected.Tipoo, person.selected.Organizacion, person.selected.Categoria)">
            <i class="plus icon"></i>
            Agregar stakeholder</button>

        <button ng-disabled="person.selected == null" type="button" class="ui green right floated button"
            ng-show="editarActividad == true" ng-click="AgregarStakeholderActividadDirecto(person.selected.ID)">
            <i class="plus icon"></i>
            Agregar stakeholder 2</button>

        <!-- Fin buscar stackeholders -->

        <table class="ui blue table compact celled">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Tipo</th>
                    <th>Organización<br>Categoría</th>
                    <th>Rol</th>
                    <th style="min-width: 10px;"></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in stakeholdersActividad">
                    <td>{{item.StakeholderId}}</td>
                    <td>{{item.Nombre}}</td>
                    <td>{{item.Tipo}}</td>
                    <td>{{item.Organizacion}}</td>
                    <td>{{item.Rol}}</td>

                    <td style="padding-right: 0px;">
                        <button class="ui icon tiny red button" type="button" style="min-width: 25px; padding: 4px 3px;"
                            ng-click="eliminarStakeholderActividad(item.ID)">
                            <i class="trash alternate icon"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <br>
        <br>
        <br>


        <button class="ui yellow right floated button" ng-show="editarActividad == false"
            ng-disabled="frmActividades.$invalid" type="submit">
            <i class="pencil icon"></i>
            Guardar actividad</button>


        <button type="button" class="ui yellow right floated button" ng-show="editarActividad == true"
            ng-click="guardar()">
            <i class="pencil icon"></i>
            Guardar actividad</button>

        <button type="button" class="red left ui button" data-dismiss="modal" ng-click="cancel()"><i class="x icon"></i>
            Cancelar</button>

    </form>
</div>