<div class="row" xmlns="http://www.w3.org/1999/html">
    <div class="col-xs-8">
        <p></p>
        <input type="text" placeholder="Filter" ng-model="filter_symbols.name">
        <button type="button" class="btn btn-default btn-lg" ng-click="fields.filterSymbols('')">Filter l&ouml;schen</button>
        <p></p>
        <button style="margin: 5px" ng-repeat="category in fields.symbols.symbols" type="button" class="btn btn-default btn-lg" ng-click="fields.filterSymbols(category.name)">{{category.name}}
        </button>
        <br>
        <div class="flex-grid" ng-repeat="symbol in fields.symbols.symbols | filter:filter_symbols">
            <span class="imageWithText" ng-repeat="sign in symbol.signs">
                <span class="tooltipfields">{{sign.description}}</span>
                <span class="imageWithText-label">{{sign.title}}</span>
                    <img style="padding: inherit" ng-click="fields.selectSymbol(sign.name, sign.title, sign.description)" ng-src="images/symbols/{{sign.name}}.svg" alt="Description"/>
            </span>
        </div>
    </div>
    <div class="col-xs-4">
        <div id="myAffix" data-spy="affix">
            <input id="fieldTextTop" ng-model="fields.currentField.fieldTextTop" type="text" title="Obere Beschriftung">
            <br>
            <img id="ImageSrc" ng-src="{{fields.currentField.image}}"/>
            <br>
            <input id="fieldTextBottom" ng-model="fields.currentField.fieldTextBottom" type="text" placeholder="Text eingeben" title="Untere Beschriftung">
            <h4>Kommentar</h4>
            <textarea id="fieldComment" rows="10" cols="40" ng-model="fields.currentField.fieldComment" type="text" placeholder="Kommentar hinzufügen"></textarea>
            <br>
            <button type="button" class="btn btn-default btn-lg" ng-click="fields.submit()">Bestätigen</button>
            <button type="button" class="btn btn-default btn-lg" ng-click="fields.delete()">Löschen</button>
        </div>
    </div>
</div>