</form>

<h3 class="ui header">
    <div class="ui animated button blue" tabindex="0" ng-click="volver('Stakeholders')">
        <div class="visible content"><i class="left arrow icon"></i> Volver</div>
        <div class="hidden content">
            <i class="left arrow icon"></i>
        </div>
    </div>&nbsp;&nbsp;INFORMACIÓN DEL STAKEHOLDER - ID # {{stakeholder.ID}}</h3>
<div class="ui divider"></div>

<button ng-click="modificarStakeholder()" type="button" class="ui yellow button">
    <i class="pencil icon"></i>
    Guarda stakeholder</button>

<br>
<br>

<div id="Informacion" style="background-color: #fff;">

    <form class="ui form" name="frm" novalidate>
        <div class="two fields">
            <div class="required field" ng-class="{error: !frm.Title.$valid}">
                <label>Nombre</label>
                <input ng-model="stakeholder.Title" type="text" name="Title" placeholder=""
                    required capitalize>
            </div>

            <div class="required field" ng-class="{error: !frm.Telefono.$valid}">
                <label>Teléfono</label>
                <input ng-model="stakeholder.Telefono" type="text" name="Telefono" placeholder=""
                    style="height: 31px" required capitalize>
            </div>
        </div>
        <div class="two fields">
            <div class="field">
                <label>Email</label>
                <input ng-model="stakeholder.Email" type="text" name="Email" placeholder=""
                    capitalize>
            </div>

            <div class="required field" ng-class="{error: !frm.Rol.$valid}">
                <label>Cargo/Rol</label>
                <input ng-model="stakeholder.Rol" type="text" name="Rol" placeholder="" required
                    style="height: 31px" capitalize>
            </div>
        </div>


        <!-- Mas de una zona -->
        <div class="two fields" ng-show="zonasUsuario.length > 1">

            <div class="required field" ng-class="{error: !frm.Operacion.$valid}">
                <label>Zona</label>
                <!-- <select ng-model="stakeholder.Operacion" ng-disabled="bloqueo" class="form-control" 
                    ng-options="item as item.zona for item in zonasUsuario" name="Operacion"  ng-change="obtenerComunasUsuario(stakeholder.Operacion.zona)">
                </select> -->

                <!-- <select ng-model="stakeholder.Operacion" class="form-control"
                    ng-change="obtenerComunasUsuario(stakeholder.Operacion)">
                    <option ng-repeat="item in zonasUsuario" value="{{item.zona}}">{{item.zona}}</option>
                </select> -->

                {{stakeholder.Operacion}}
            </div>

            <div class="required field" ng-class="{error: !frm.Comuna.$valid}">
                <label>Comuna {{stakeholder.Comuna}}</label>
                <!-- <select ng-disabled="bloqueo" class="form-control" ng-model="stakeholder.Comuna"
                    ng-options="item as item.Comuna for item in comunasUsuarioData" name="Comuna" >
                </select> -->

                <select ng-model="stakeholder.Comuna" class="form-control">
                    <option ng-repeat="item in comunasUsuarioData" value="{{item.Comuna}}">{{item.Comuna}}</option>
                </select>

            </div>
        </div>
        <!-- Fin Mas de una zona -->


        <!-- Solo una zona -->
        <div class="two fields" ng-show="zonasUsuario.length == 1">

            <div class="required field" ng-class="{error: !frm.Operacion.$valid}">
                <label>Zona</label>
                <input ng-disabled="true" ng-model="stakeholder.Operacion" type="text" name="Title" placeholder="">


            </div>

            <div class="required field" ng-class="{error: !frm.Comuna.$valid}">
                <label>Comuna</label>
                <select ng-disabled="bloqueo" class="form-control" ng-model="stakeholder.Comuna"
                    ng-options="item as item.Comuna for item in comunasUsuario" name="Comuna">
                </select>
            </div>
        </div>
        <!-- Fin Solo una zona -->

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

        </div>

        <div class="two fields">
            <div class="required field" ng-class="{error: !frm.Tipoo.$valid}">
                <label>Tipo</label>
                <!-- <select ng-disabled="bloqueo" class="form-control" ng-model="stakeholder.Tipoo"
                    ng-options="item as item.Valor for item in tipoStakeholder" name="Tipoo" required ng-change="obtenerCategorias(stakeholder.Tipoo)">
                </select> -->

                <!-- <select ng-model="stakeholder.Tipoo" class="form-control">
                    <option ng-repeat="item in tipoStakeholder" value="{{item.Valor}}">{{item.Valor}}</option>
                </select> -->
                {{stakeholder.Tipoo}}

            </div>

            <div class="field">
                <!-- <label>Relevancia {{stakeholder.Relevancia}}</label> -->

                <!-- <button class="ui icon button red" type="button" ng-click="stakeholder.Relevancia ='Alta'"
                    style="height: 33px;">
                    <i class="check icon" ng-show="stakeholder.Relevancia == 'Alta'"></i>
                </button>

                <button class="ui icon button green" type="button" ng-click="stakeholder.Relevancia ='Normal'"
                    style="height: 33px;">
                    <i class="check icon" ng-show="stakeholder.Relevancia == 'Normal'"></i>
                </button> -->

                <!-- <label>&nbsp;</label>             -->
                <i class="thumbs up outline icon center" style="font-size: 33px; color: lightgray; font-weight: bold;" ng-click="stakeholder.Relevancia ='Alta'" ng-class="{'green': stakeholder.Relevancia == 'Alta'}"></i>
                <i class="thumbs down outline icon center" style="font-size: 33px; color: lightgray; font-weight: bold;" ng-click="stakeholder.Relevancia ='Baja'" ng-class="{'red': stakeholder.Relevancia == 'Baja'}"></i>

            </div>

        </div>



        <!-- {{stakeholder.Tipoo.Valor}} -->
        <!-- ES TIPO COMUNIDADES -->
        <div ng-show="stakeholder.Tipoo.Valor != 'Funcionario Publico' && stakeholder.Tipoo.Valor != null ">
            <div class="two fields">
                <div class="required field">
                    <label>Categoría</label>
                    <select ng-disabled="bloqueo" class="form-control" ng-model="stakeholder.Categoria"
                        ng-options="item as item.Valor for item in categoriaStakeholderFilter" name="Categoria"
                        required>
                    </select>
                </div>

                <div class="field" ng-show="stakeholder.Categoria.Valor == 'Otra'">
                    <label>Nombre categoría</label>
                    <input ng-model="stakeholder.CategoriaOtra" type="text" name="Title" placeholder="" capitalize>
                </div>


            </div>



        </div>

        <!-- ES TIPO FUNCIONARIO PUBLICO -->
        <!--  -->
        <div ng-show="stakeholder.Tipoo.Valor == 'Funcionario Publico'">
            <div class="field">
                <label>Organización/Institución</label>
                <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="width: 100%;"
                    title="">
                    <ui-select-match placeholder="Buscar una organización">{{$select.selected.Title}}</ui-select-match>
                    <ui-select-choices repeat="person in people | propsFilterOrganizaciones: {Title: $select.search}">
                        <div ng-bind-html="person.Title | highlight: $select.search"></div>

                        <small>
                            {{person.Categoria}} ({{person.Nacionalidad}})
                        </small>

                    </ui-select-choices>
                </ui-select>
            </div>
        </div>


        <div class="required field">
            <label>Descripción</label>
            <textarea name="Descripcion" ng-model="stakeholder.Descripcion" rows="3" required
                capitalize></textarea>
        </div>

        <div class="field">
            <label>URL Ubicación ( <a href="https://www.google.com/maps/" style="color: black !important;"
                    target="_blank">Ir a Google
                    Maps</a> )</label>
            <!-- <input ng-model="stakeholder.DireccionUrl" type="text" name="DireccionUrl"
                placeholder=""> -->

                <div class="ui action input">            
                    <input type="text" ng-model="stakeholder.DireccionUrl" type="text" name="DireccionUrl" placeholder="">
                    <a ng-href="{{stakeholder.DireccionUrl}}" style="color: white !important;" target="_blank" class="ui icon button teal">
                        <i class="arrow circle right icon"></i>&nbsp;Ir a Google Maps</a>
                </div>
        </div>
      
    </form>

</div>
<!--Fin Asistentes funcionarios públicos -->