</form>

<h3 class="ui header">
    <!-- <div class="ui animated button primary" tabindex="0" ng-click="volver('Asuntos')">
        <div class="visible content"><i class="left arrow icon"></i> Volver a asuntos</div>
        <div class="hidden content">
            <i class="left arrow icon"></i>
        </div>
    </div> -->
    <!-- &nbsp;  -->
    <div class="ui animated button blue" tabindex="0" ng-click="volver('Asuntos')">
        <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 ASUNTO - ID #{{asunto.ID}}</h3>
<div class="ui divider"></div>


<button ng-click="modificarAsunto()" type="button" class="ui yellow button">
    <i class="pencil icon"></i>
    Guarda asunto</button>
<br>
<br>



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



    <form class="ui form" name="frm" novalidate ng-submit="crearAsunto()">


        <div class="ui info message">
            <!-- <div class="header">
              Was this what you wanted?
            </div> -->
            <div class="four fields">
                <div class="field">
                    <label>Total participantes</label>
                    <div class="ui circular labels">
                        <a class="ui label" style="font-size: 13px;">
                            {{asunto.Participantes}}
                        </a>
                    </div>
                </div>

                <div class="field">
                    <label>Presupuesto</label>
                    {{asunto.Presupuesto | currency }}
                </div>

                <div class="field">
                    <label>Gastado</label>
                    {{asunto.Gastado | currency }}
                </div>

                <div class="field">
                    <label>Diferencia</label>
                    {{asunto.Diferencia | currency }}
                </div>
            </div>
        </div>


        <div class="two fields">
            <div class=" field">
                <label>Nombre</label>
                <input ng-model="asunto.Title" type="text" name="Title" placeholder="" capitalize>
            </div>

            <div class=" field">
                <label>Fecha</label>
                <input ng-model="asunto.FechaReunion" type="date" name="FechaReunion" placeholder=""
                    style="height: 31px">
            </div>


        </div>


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


            <div class=" field">
                <label>Zona</label>
                <!-- <select ng-model="asunto.Operacion" ng-disabled="bloqueo" class="form-control"
                    ng-options="item as item.zona for item in zonasUsuario" name="Operacion"
                    ng-change="obtenerComunasUsuario(asunto.Operacion)">
                </select> -->

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

            </div>

            <div class=" field">
                <label>Comuna</label>
                <!-- <select ng-disabled="bloqueo" class="form-control" ng-model="asunto.Comuna"
                    ng-options="item as item.Comuna for item in comunasUsuarioData" name="Comuna">
                </select> -->

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

            </div>
        </div>


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

            <div class=" field">
                <label>Zona</label>
                {{asunto.Operacion}}
                <!-- <input ng-model="asunto.Operacion" type="text"  name="Title" placeholder="" disabled> -->

            </div>

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


            </div>
        </div>

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



        <div class="two fields">
            <div class="field">
                <label>Ambito</label>
                <select ng-model="asunto.Ambito" class="form-control" ng-change="obtenerProgramas(asunto.Ambito)">
                    <option ng-repeat="item in ambitos" value="{{item.Valor}}">{{item.Valor}}</option>
                </select>
            </div>

            <div class=" field">
                <label>Programa</label>
                <!-- <select ng-disabled="bloqueo" class="form-control" ng-model="asunto.Programa"
                    ng-options="item as item.Valor for item in programas" name="Programa" >
                </select> -->
                <select ng-model="asunto.Programa" class="form-control">
                    <option ng-repeat="item in programas" value="{{item.Valor}}">{{item.Valor}}</option>
                </select>


            </div>
        </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="asunto.Ubicacion" type="text" name="Ubicacion" placeholder="">
        </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>

        <div class="ui action input">            
            <input type="text" ng-model="asunto.Ubicacion" type="text" name="Ubicacion" placeholder="">
            <a ng-href="{{asunto.Ubicacion}}" 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>

        <br><br>


    </form>
</div>

<!-- Mostrar posterior a la creación del asunto -->
<div ng-hide="asunto.Estado == Creado">
    <h4 class="ui horizontal divider header">
        <i class="handshake outline icon"></i>
        Actividades
    </h4>


    <button ng-click="showModalAgregarActividad(asunto, null, false, false, Actividades)" type="button"
        class="ui positive button">
        <i class="plus icon"></i>
        Agregar actividad</button>

    <br>
    <br>

    <table class="ui celled blue table compact">
        <thead>
            <tr>
                <th style="width: 50px;">#ID</th>
                <th style="width: 200px;">Nombre</th>
                <th style="width: 90px;">Fecha</th>
                <th>Descripción</th>
                <th style="width: 120px;">Comuna</th>
                <th style="width: 80px;">Partici.</th>
                <th style="width: 80px;">Gastado</th>
                <th style="width: 180px">Modificada por</th>
                <th style="width: 180px;">Adjuntos</th>
                <!-- <th style="width: 200px">Stakeholders</th> -->
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in Actividades">
                <td>{{item.ID}}</td>

                <td style="vertical-align: middle">
                    <a href="" ng-click="showModalAgregarActividad(asunto, item.ID, true, true, Actividades)"><i
                            class="share icon"></i> {{item.Title}}</a>
                </td>

                <!-- <td>{{item.Title}}</td> -->
                <td>{{item.FechaActividad | date}}</td>
                <td>{{item.Descripcion}}</td>
                <td>{{item.Comuna}}
                    <span ng-show="item.Comuna == 'Otra'">({{item.OtraComuna}})</span>
                </td>
                <td>{{item.Participantes}}</td>
                <td>{{item.Gastado | currency}}</td>
                <td style="vertical-align: middle">{{item.Editor.Title}}</td>

                <td>
                    <button class="ui compact tiny button" type="button"
                        ng-click="showModalAgregarAdjuntoActividad(item.ID)">
                        
                        Adjunto
                    </button>

                    <div ng-repeat="archivo in item.AttachmentFiles.results ">
                        <button class="ui icon tiny red button" type="button" style="min-width: 25px; padding: 4px 3px;"
                            ng-click="eliminarAdjunto(archivo.FileName, item.ID)">
                            <i class="trash alternate icon"></i>
                        </button>

                        <a class="adjunto" href="{{archivo.ServerRelativeUrl}}" style="color: blue"
                            target="_blank">{{archivo.FileName | limitTo: 18}}
                            {{archivo.FileName.length > 18 ? '...' : ''}}</a>


                    </div>

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