<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="toolbar" style="left:16px;">
                <button type="button" ng-click="$ctrl.go('/login')" class="btn btn-warning">Odjava</button>
            </div>
            <h1>Urejevalnik narečnih besedil</h1>
            <div class="toolbar">
                <button type="button" ng-click="$ctrl.save($ctrl.id, false)" class="btn btn-success save">Shrani</button>
                <button type="button" ng-click="$ctrl.save($ctrl.id, true)" class="btn btn-default save">Shrani in zapri</button>
                <button type="button" ng-click="$ctrl.go('/')" class="btn btn-danger">Prekliči</button>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <form class="form-material" ng-submit="$ctrl.save();">

        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">Osnovni podatki</div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-md-12">Oznaka</label>
                            <div class="col-md-12">
                                <input type="text" name="location_label" ng-model="$ctrl.dialectData.location_label" placeholder="F" class="form-control form-control-line">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="example-email" class="col-md-12">Lokacija</label>
                            <div class="col-md-12">
                                <input type="text" name="location_name" ng-model="$ctrl.dialectData.location_name" placeholder="Filovci" class="form-control form-control-line">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-12">Narečje oz. podnarečje</label>
                            <div class="col-sm-12">
                                <select name="dialect_key" ng-model="$ctrl.dialectData.dialect_key" class="form-control form-control-line">
                                    <option value="">--- Izberite ---</option>
                                    <option ng-repeat="i in $ctrl.selectItems" value="{{i.key}}">{{ i.name }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="example-email" class="col-md-12">Zemljepisna širina in dolžina</label>
                            <div class="form-row align-items-center">
                                <div class="col-md-6">
                                    <input type="text" name="location_latitude" ng-model="$ctrl.dialectData.location_latitude" placeholder="46.662270" class="form-control form-control-line">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" name="location_longitude" ng-model="$ctrl.dialectData.location_longitude" placeholder="16.299627" class="form-control form-control-line">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="example-metainfo" class="col-md-12">Metapodatki</label>
                            <div class="col-md-12">
                                <pre><textarea name="metadata" ng-model="$ctrl.dialectData.metadata" placeholder="Posnel Janez Novak dne 1.1.2018, ..." class="form-control form-control-line" rows="2"></textarea></pre>
                            </div>
                        </div> 
                        <div class="form-group">
                            <label for="example-email" class="col-md-12">Zvočni zapis (priporočeno: mp3)</label>
                            <div class="col-md-12">
                                <p ng-if="$ctrl.dialectData.audio">Naložena datoteka: {{$ctrl.dialectData.audio}}</p>
                                <button class="btn btn-warning" ng-if="$ctrl.dialectData.audio" type="button" ng-click="$ctrl.deleteAudio($ctrl.id, $ctrl.dialectData.audio)">Izbriši naloženo datoteko</button><br>
                                <p ng-if="!$ctrl.dialectData.audio">Ni naložene datoteke.</p>
                                <br><div id="putAudio"></div><br>

                                <input type="file" id="audio" style="visibility:hidden" custom-on-change="$ctrl.uploadFile">
                                <input ng-if="!$ctrl.dialectData.audio" type="button" value="Izberite datoteko" onclick="document.getElementById('audio').click();" class="btn btn-info"><br>
                                <p class="hidden" id="selected"></p>
                            </div>
                        </div>
                    </div><!-- panel-body -->
                </div><!-- panel -->
            </div>

            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">Besedilo</div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-md-12">Transkripcija</label>
                            <div class="col-md-12">
                                <textarea name="transcription" ng-model="$ctrl.dialectData.transcription" placeholder="Fˈčȧːs sọ biˈlẹː ˈiže pˈrec iˈnåčiše..." class="form-control form-control-line" rows="6"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-12">Poknjižitev</label>
                            <div class="col-md-12">
                                <textarea name="literal_slovene"  ng-model="$ctrl.dialectData.standard_slovene" placeholder="Včasih so bile hiše precej inačiše ‛drugačne’..." class="form-control form-control-line" rows="6"></textarea>
                            </div>
                        </div>
                    </div><!-- panel-body -->
                </div><!-- panel -->
            </div><!-- col -->
        </div><!-- row -->

        <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-default" id="analiza">
                    <div class="panel-heading">Analiza</div>
                    <div class="panel-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Sekcija</th>
                                    <th>Opis</th>
                                    <th>Primeri</th>
                                </tr>
                            </thead>
                            <tbody ng-repeat="i in [1,2,3,4,5,6,7]">
                                <tr class="tr-head">
                                    <td>{{ i }}</td>
                                    <td colspan="2">
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <input type="text" name="section{{i}}" placeholder="{{$ctrl.analysisPlaceholders[i-1]}}" ng-model="$ctrl.dialectData['analysis'+i]" class="form-control form-control-line">
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr ng-repeat="a in $ctrl.analysisData[i]" class="analysis-items">
                                    <td>{{i}}.{{$index+1}} <!--<a style="background:red; color:white;" href="" ng-click="$ctrl.deleteAnalysisItem(i, $index+1)">DELETE</a>-->
                                        <button type="button" class="close" ng-click="$ctrl.deleteAnalysisItem($ctrl.id, a.id)" aria-label="Close"><span style="color:red;" title="Izbriši">×</span></button>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <textarea name="maintext[i][$index]" ng-model="$ctrl.analysisData[i][$index].maintext" class="form-control form-control-line" rows="5"></textarea>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <textarea name="example[i][$index]" ng-model="$ctrl.analysisData[i][$index].examples" class="form-control form-control-line" rows="5"></textarea>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="analysis-items">
                                        <td></td>
                                        <td colspan="2">
                                            <div class="form-group">
                                                <div class="col-md-12">
                                                    <button type="button" class="btn btn-default" ng-click="$ctrl.createNewAnalysisItem($ctrl.id, i)">+ dodaj vnos</button>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                            </tbody>
                        </table>
                    </div><!-- panel-body -->
                </div><!-- panel -->
            </div><!-- col -->
        </div><!-- row -->

    </form>

</div><!-- container -->

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="toolbar-bottom">
                <button type="button" ng-click="$ctrl.save($ctrl.id, false)" class="btn btn-success save">Shrani</button>
                <button type="button" ng-click="$ctrl.save($ctrl.id, true)" class="btn btn-default save">Shrani in zapri</button>
                <button type="button" ng-click="$ctrl.go('/')" class="btn btn-danger">Prekliči</button>
            </div>
        </div>
    </div>
</div>