<form role="form">
<table class="table table-bordered table-striped" style="width: auto;">
    <tr>
        <th style="width: 100px;">Status</th>
        <th style="width: 100px;">Priorität</th>
        <th style="width: 150px;">Mitarbeiter</th>
        <th style="width: 150px;">Datum</th>
        <th style="width: 220px;">Kunde/ Kontakt</th>
        <th style="width: 220px;">Kategorie</th>
        <th style="width: 220px;">Programm/ Bereich</th>
        <th style="width: 300px;">Beschreibung</th>
        <th style="width: 250px;">Kommentar</th>
        <th style="width: 150px;">Dauer/ Fortschritt</th>
    </tr>

	<!--
    <tr>
        <td><input ng-model="Filter.kunde"/></td>
        <td>
            <div class="dropdown">
                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{domain.aktiv[Filter.aktiv]||'alle'}}&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a ng-click="Filter.aktiv=''">alle</a></li>
                    <li class="divider"></li>
                    <li ng-repeat="(key,val) in domain.aktiv"><a ng-click="Filter.aktiv=key">{{val}}</a></li>
                </ul>
            </div>
        </td>
        <td>
            <div class="dropdown">
                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{Filter.system||'alle'}}&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a ng-click="Filter.system=''">alle</a></li>
                    <li class="divider"></li>
                    <li ng-repeat="val in domain.system"><a ng-click="Filter.system=val">{{val}}</a></li>
                </ul>
            </div>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td>
            <div class="dropdown">
                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{Filter.woche||'alle'}}&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a ng-click="Filter.woche=''">alle</a></li>
                    <li class="divider"></li>
                    <li ng-repeat="val in domain.woche"><a ng-click="Filter.woche=val">{{val}}</a></li>
                </ul>
            </div>
        </td>
        <td>
            <div class="dropdown">
                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{domain.bundesland[Filter.bundesland]||'alle'}}&nbsp;<b class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a ng-click="Filter.bundesland=''">alle</a></li>
                    <li class="divider"></li>
                    <li ng-repeat="(key,val) in domain.bundesland"><a ng-click="Filter.bundesland=key">{{val}}</a></li>
                </ul>
            </div>
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
	-->
    <tr ng-repeat="zeile in tickets"> <!-- | filter:Filter">-->
        <td><span class="glyphicon {{domain.statusicon[zeile.status]}}"></span>&nbsp; {{domain.status[zeile.status]}}</td>
        <td><span class="glyphicon {{domain.prioritaeticon[zeile.prioritaet]}}"></span>&nbsp; {{domain.prioritaet[zeile.prioritaet]}}</td>
        <td>{{zeile.benutzer}}</td>
        <td>{{zeile.datum}}</td>
        <td><strong>{{zeile.kunde}}</strong><br/>{{zeile.kontakt}}</td>
        <td>{{domain.kategorie[zeile.kategorie]}}</td>
        <td>{{domain.programm[zeile.programm]}}</td>
        <td>{{zeile.beschreibung}}</td>
        <td>{{zeile.kommentar}}</td>
        <td>{{zeile.dauer}}<br/>{{zeile.fortschritt}} %</td>

        <td>
            <a ng-href="#/overview/{{zeile.kunde}}/all/all"><button type="button" class="btn btn-default" title="Fehlermeldungen"><span class="glyphicon glyphicon-exclamation-sign"></span></button></a>
            <a ng-href="#/stats/{{zeile.kunde}}"><button type="button" class="btn btn-default" title="Statistik"><span class="glyphicon glyphicon-stats"></span></button></a>
            <a ng-href="#/config/{{zeile.kunde}}/current"><button type="button" class="btn btn-default" title="Konfiguration"><span class="glyphicon glyphicon-list-alt"></span></button></a>
            <a><button type="button" class="btn btn-default" title="Kalender"><span class="glyphicon glyphicon-calendar"></span></button></a>
        </td>
    </tr>
</table>
    <br/><br/>

    <button type="button" class="btn btn-success" ng-click="newTicket()" data-toggle="modal" data-target="#ticket-modal" >
        <span class="glyphicon glyphicon-asterisk"></span> Neues Ticket
    </button>

</form>

<!-- Modal -->
<div class="modal fade" id="ticket-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-tag"></span>&nbsp; Ticket <span ng-show="current.id > 0">#{{current.id}}</span></h4>
            </div>
            <div class="modal-body">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>Mitarbeiter</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{current.benutzer||'unbekannt'}}&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="val in domain.benutzer"><a ng-click="current.benutzer=val">{{val}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Status</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown"><span class="glyphicon {{domain.statusicon[current.status]}}"></span>&nbsp; {{domain.status[current.status]||'unbekannt'}}&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="(k,v) in domain.status"><a ng-click="current.status=k"><span class="glyphicon {{domain.statusicon[k]}}"></span>&nbsp; {{v}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Priorität</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown"><span class="glyphicon {{domain.prioritaeticon[current.prioritaet]}}"></span>&nbsp; {{domain.prioritaet[current.prioritaet]||'unbekannt'}}&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="(k,v) in domain.prioritaet"><a ng-click="current.prioritaet=k"><span class="glyphicon {{domain.prioritaeticon[k]}}"></span>&nbsp; {{v}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Datum</th>
                        <td>
                            <label>
                                <input type="date" ng-model="current.datum"/>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <th>Termin/Frist</th>
                        <td>
                            <label>
                                <input type="date" ng-model="current.termin"/>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <th>Kunde</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{current.kunde||'unbekannt'}}&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="val in domain.kunde"><a ng-click="current.kunde=val">{{val}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Kontakt/Ansprechpartner</th>
                        <td>
                            <label>
                                <input type="text" ng-model="current.kontakt"/>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <th>Kategorie</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{domain.kategorie[current.kategorie]||'unbekannt'}}&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="(k,v) in domain.kategorie"><a ng-click="current.kategorie=k">{{v}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Programm/Bereich</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{domain.programm[current.programm]||'unbekannt'}}&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="(k,v) in domain.programm"><a ng-click="current.programm=k">{{v}}</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Betreff</th>
                        <td>
                            <label>
                                <input type="text" ng-model="current.betreff"/>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <th>Beschreibung</th>
                        <td>
                            <label>
                                <textarea cols="40" rows="5" ng-model="current.beschreibung"></textarea>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <th>Kommentar</th>
                        <td>
                            <label>
                                <textarea cols="40" rows="5" ng-model="current.kommentar"></textarea>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <th>Dauer</th>
                        <td>
                            <label>
                                <input type="time" ng-model="current.dauer"/>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <th>Fortschritt</th>
                        <td>
                            <div class="dropdown">
                                <a class="btn dropdown-toggle" role="button" data-toggle="dropdown">{{current.fortschritt||'?'}} %&nbsp;<b class="caret"></b></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-repeat="v in domain.fortschritt"><a ng-click="current.fortschritt=v">{{v}} %</a></li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" ng-click="saveTicket()" data-dismiss="modal">Speichern</button>
            </div>
        </div>
    </div>
</div>



<style>
.table tbody tr td {
    vertical-align: middle;
}

.label-0 {
    background-color: #aaaaaa;
}

.label-1 {
    background-color: #bbbb00;
}

.label-2 {
    background-color: #bb8800;
}

.label-3 {
    background-color: #bb0000;
}


table.ft {
    border: 1px solid #888;
}

table.ft td {
    padding: 3px 5px;
    margin: 2px;
    background-color: #ddd;
}

.logdatei {
    margin: 10px 5px 20px 5px;
    padding: 0 20px 10px 20px;
    background-color: #eee;
    border: 1px solid #888;
}

.modell {
    font-weight: bold;
    background-color: #ccc;
    padding: 10px;
    margin: 0 -20px;
}

.rot {
    background-color: #e88;
}

.number {
    font-weight: bold;
    background-color: #ccc;
    border: 1px solid #888888;
}

.strich {
    border-bottom: 1px solid #888888;
}

</style>