<div class="container">
    <div class="row">
        <h2 id="heading">Status Übersicht</h2>
        <form>
            <ul id="statusTable" style="list-style: none;">
                <li class="gridItem status-{{issi.status}}" style="height: {{config.height}}px;font-size:{{config.font}}px; width: {{config.width}}%;" ng-repeat="issi in issis | filter: filterFunction">
                    <a href ng-click="loadItem(issi)" data-toggle="modal" data-target="#issiModal">{{issi.name}}<br /><span ng-bind="issi.statusText"></span></a>
                </li>
            </ul>
        </form>
        <div class="clearfix" id="box">
        </div>
        <button type="button" data-toggle="modal" data-target="#configModal" class="btn btn-default" aria-label="Left Align">
            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
            Einstellungen
        </button>
        <button type="button" data-toggle="modal" data-target="#newModal" class="btn btn-success" aria-label="Left Align">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            Neu
        </button>
    </div>


    <!-- Modal -->
    <div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="newModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="newModalLabel">Einstellungen</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Label</label>
                            <div class="col-sm-5">
                                <input class="form-control" type="text" ng-model="newView.label" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Höhe der Zellen (Pixel)</label>
                            <div class="col-sm-5">
                                <input class="form-control" type="number" ng-model="newView.height" required min="20" max="200">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Breite der Zellen (Prozent)</label>
                            <div class="col-sm-5">
                                <input class="form-control" type="number" ng-model="newView.width" required min="1" max="100">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Textgröße (Pixel)</label>
                            <div class="col-sm-5">
                                <input class="form-control" type="number" ng-model="newView.font" required min="1" max="200">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Einträge</label>
                            <div class="col-sm-5">
                                <select size="6" name="ngvalueselect" ng-model="newView.items" multiple>
                                    <option ng-repeat="option in issis" ng-value="option.ISSI">{{option.name}}</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" ng-click="cancel()" data-dismiss="modal">Abbrechen</button>
                    <button type="button" class="btn btn-primary" ng-click="create()" data-dismiss="modal">Speichern</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="configModal" tabindex="-1" role="dialog" aria-labelledby="configModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="configModalLabel">Einstellungen</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Label</label>
                            <div class="col-sm-5">
                                <input class="form-control" type="text" ng-model="config.label" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Höhe der Zellen (Pixel)</label>
                            <div class="col-sm-5">
                                <input class="form-control" type="number" ng-model="config.height" required min="20" max="200">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Breite der Zellen (Prozent)</label>
                            <div class="col-sm-5">
                                <input class="form-control" type="number" ng-model="config.width" required min="1" max="100">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Textgröße (Pixel)</label>
                            <div class="col-sm-5">
                                <input class="form-control" type="number" ng-model="config.font" required min="1" max="200">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-5 control-label">Einträge</label>
                            <div class="col-sm-5">
                               <select size="6" name="ngvalueselect" ng-model="config.items" multiple>
                                    <option ng-repeat="option in issis" ng-value="option.ISSI">{{option.name}}</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" ng-click="cancel()" data-dismiss="modal">Abbrechen</button>
                    <button type="button" class="btn btn-primary" ng-click="save()" data-dismiss="modal">Speichern</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="issiModal" tabindex="-1" role="dialog" aria-labelledby="issiModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="issiModalLabel">Informationen</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <tr>
                            <th>Eigenschaft</th>
                            <th>Wert</th>
                        </tr>
                        <tr><td>Name</td><td>{{item.name}}</td></tr>
                        <tr><td>ISSI</td><td>{{item.ISSI}}</td></tr>
                        <tr><td>OPTA</td><td>{{item.OPTA}}</td></tr>
                        <tr><td>Gruppe</td><td>{{item.lGSSIname}}</td></tr>
                        <tr><td>Status</td><td>{{item.statusText}}</td></tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>
</div>