<script type="text/ng-template"  id="nodes.html">
  <ul ui:sortable="sortableOptions" ng:model="node.nodes" class="instrs" ng-show="node.nodes.length > 0">
    <li ng-repeat="node in node.nodes" ng-include="getTemplate(node)"></li>
  </ul>
</script>
<script type="text/ng-template"  id="nodes1.html">
  <ul ui:sortable="sortableOptions" ng:model="node.nodes1" class="instrs" ng-show="node.nodes1.length > 0">
    <li ng-repeat="node in node.nodes1" ng-include="getTemplate(node)"></li>
  </ul>
</script>
<script type="text/ng-template"  id="nodes2.html">
  <ul ui:sortable="sortableOptions" ng:model="node.nodes2" class="instrs" ng-show="node.nodes2.length > 0">
    <li ng-repeat="node in node.nodes2" ng-include="getTemplate(node)"></li>
    </ul>
</script>

<script type="text/ng-template"  id="tree_item_renderer.html">
    {{node.name}} {{node.type}}
    <button ng-click="delete(node)" ng-show="node.nodes.length > 0" class="btn">Limpar</button>
    <span ng-include="'nodes.html'"></span>
    <span ng-include="'partials/elements/btns.html'"></span>
</script>

<script type="text/ng-template"  id="start.html">
  {{node.name}} {{node.type}}
  <button ng-click="delete(node)" ng-show="node.nodes.length > 0" class="btn">Limpar</button>
  <span ng-include="'nodes.html'"></span>
  <span ng-include="'partials/elements/btns.html'"></span>
</script>


<script type="text/ng-template"  id="var.html">
  <i>{{node.name}}</i> <span edit-in-place='node.data.varName'></span> = <input type="text" value="VAR"> {{node.data.varName}}
</script>
<div class="container">
  <div class="row-fluid">

  <ul class="nav nav-tabs">
    <!-- tab : send/eval button -->
    <button class="btn btn-default" ng-click="run(true)"><img
      src="img/autochecking.png" title="{{'alt_button_eval' | i18n}}"/> {{'button_eval' | i18n }} </button> <!-- Avaliar -->
        <!--div class="history">
          <ul class="hide">
            <li ng-repeat="ah in actionsHistory">{{$index}} ) {{ah.name}}</li>
          </ul>
          <button class="btn" ng-click="undo()" ng-hide="historyStack<=0"><img src="img/undo.png" /></button>
          <button class="btn disabled" ng-show="historyStack<=0"><img src="img/undo.png" /></button>
          <button class="btn" ng-click="redo()" ng-show="historyStack < actionsHistory.length-1"><img src="img/redo.png" /></button>
          <button class="btn disabled" ng-hide="historyStack < actionsHistory.length-1"><img src="img/redo.png" /></button>
      </div-->
    <!-- main tab -->
    <!--h2>Programa: {{program.programName}}</h2-->
    <li ng-class="{active: $index==currentFunction}" ng-repeat="func in program.functions"><a
        href="javascript:;" ng-click="setCurrentFunction($index)"><i class="fa fa-code"></i> {{func.name}}</a></li> <!-- Principal -->
  </ul>
  </div>

  <div class="row-fluid" id="program">
    <div class="span6">
      <div class="ivprog">
        <div class="parameters" ng-hide="program.functions[currentFunction].isMain">
          <h5>
            <i class="fa fa-bars fa-fw"></i> Parâmetros 
            <button class="btn btn-info" ng-click="addParam()"><i class="fa fa-plus"></i></button>
          </h5>
          <span class="var" ng-repeat="param in program.functions[currentFunction].params">&nbsp;<span edit-in-place='param.name'></span> = <span edit-in-place='param.initialValue'></span> <span edit-in-place="param.opa" /> <button class="btn btn-mini" ng-click="removeParam(var)"><i class="fa fa-minus"></i></button></span>
          <span class="clearfix"></span>
          </div>
          <div class="variables">
            <h5>
              <i><button class="btn btn-info btn-sm" ng-click="addVar()" title="{{'alt_button_create_var' | i18n}}">
              <i class="fa fa-plus fa-fw"></i> {{'button_create_var' | i18n}} </button></i>
            </h5>
            <span class="var" ng-repeat="var in program.functions[currentFunction].vars">&nbsp;<span edit-in-place-var-name='var.name'></span> = <span edit-in-place-var-value='var.initialValue' type='var.type'></span>
              <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-wrench"></i>
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li><a ng-click="varSetType(var, 'int')">Número inteiro</a></li>
                  <li><a ng-click="varSetType(var, 'float')">Número real</a></li>
                  <li><a ng-click="varSetType(var, 'string')">Texto</a></li>
                  <li><a ng-click="varSetType(var, 'boolean')">Verdadeiro/falso</a></li>
                </ul>
              </div>
              <button class="btn btn-xs btn-warning" title="remover esta variavel" ng-click="removeVar(var)"><i class="fa fa-minus"></i></button>
            </span>
            <span class="clearfix"></span>
            </div>

            <ul ui:sortable="sortableOptions" ng:model="program.functions[currentFunction].nodes" class="instrs">
               <li ng-repeat="node in program.functions[currentFunction].nodes" ng-include="getTemplate(node)">
               </li>
            </ul>
            <div class="addButtons">
              <div buttons="program.functions[currentFunction].nodes" id-parent="'root_'+currentFunction"></div>
              <!--div class="dropdown">
                <button class="btn dropdown-toggle btn-info btn-sm" type="button" id="dropdownMenu1" data-toggle="dropdown">
                  <i class="glyphicon glyphicon-plus"></i> Instrução
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                  <li role="presentation"><a role="menuitem" tabindex="-1" ng-click="add(program.functions[currentFunction].nodes, 'root_'+currentFunction, 'attr', 'attr')" href="javascript:;"><img src="img/att.png" width="20" height="20" /> Atribuição</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" ng-click="add(program.functions[currentFunction].nodes, 'root_'+currentFunction, 'if', 'se')" href="javascript:;"><img src="img/if.png" width="20" height="20" /> Se verdadeiro então</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" ng-click="add(program.functions[currentFunction].nodes, 'root_'+currentFunction, 'for', 'repetir')" href="javascript:;"><img src="img/loop-n.png" width="20" height="20" /> Repita N vezes</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" ng-click="add(program.functions[currentFunction].nodes, 'root_'+currentFunction, 'read', 'ler')" href="javascript:;"><img src="img/download.png" /> Leitura de dados</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" ng-click="add(program.functions[currentFunction].nodes, 'root_'+currentFunction, 'write', 'escrever')"  href="javascript:;"><img src="img/upload.png" /> Escrita de dados</a></li>
                </ul>
              </div-->
            </div>

        </div>
    </div>

    <div class="span6">
      <h4>
        <span class="fa-stack">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
        </span>
        Console</h4>
        <div class="btn-group">
        </div>
          <button class="btn" ng-click="run(false)" title="Rodar programa"><i class="fa fa-play"></i></button> &nbsp;
          <button class="btn" ng-click="run(true)" title="Testar solucao" ng-show="notSend"><i class="fa fa-play"></i></button> &nbsp;
          <button class="btn" ng-click="clearOutput()" title="{{'alt_button_create_clearoutputs' | i18n}}">{{'button_create_clearoutputs' | i18n}}</button> <!-- Clear console -->
        <div></div>
        <div class="output">
        </div>
    </div>
  </div>

  <div id="caseTests" ng-show="notSend">
    <h4>{{'msg_testcases' | i18n}}</h4><!-- Test cases -->
    <input type="button" ng-click="addTestCase()"  title="{{'alt_button_create_testcases' | i18n}}"
           value="{{'button_create_testcases' | i18n}}" class="btn btn-info" /><!-- + Test cases -->
    <table class="table table-striped table-bordered" ng-show="testCases.length>0">
      <tr>
        <th>#</th>
        <th>Input</th>
        <th>Output</th>
        <th>#</th>
      </tr>
      <tr ng-repeat="testCase in testCases">
        <td>{{$index+1}}</td>
        <td>
          <textarea ng-model="testCase.input" style="width: 100%; height: 140px;"></textarea>
        </td>
        <td>
          <textarea ng-model="testCase.output" style="width: 100%; height: 140px;"></textarea>
        </td>
        <td><input type="button" value="-" ng-click="removeTestCase(testCase)" class="btn btn-warning" />
      </tr>
    </table>
  </div>
</div>

<div class="modal" id="readData">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
    <h4 class="modal-title">Entrada de dados</h4>
    </div>
    <div class="modal-body">
    <p id="msgRead"></p>
    <p><input type="text" id="valor" /></p>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-primary" id="btnOk">Confirmar</button>
    </div>
  </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
