    <div class="content-inner">
        <div class="row">
            <div class="col" style="padding:0;">
                <h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
            </div>
            
        </div>
        <div class="row">
            <div class="col" style="padding:0;">
                <div class="search-input-container" style="width:100%;margin: 16px 0;">
                    <div class="search-input--icon"></div>
                    <input type="search"
                           style="width:100%;"
                           spellcheck="false"
                           :placeholder="$root.getLz('term.search') + '...'"
                           @input="searchLibraryArtists"
                           v-model="library.artists.search" class="search-input">
                </div>
            </div>
            <div class="col-auto flex-center">
                <div class="row">
                    <!-- <div class="col">
                        <select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryArtists(1)">
                            <optgroup label="Sort By">
                                <option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option>
                            </optgroup>
                        </select>
                    </div> -->
                    <div class="col">
                        <select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryArtists(1)">
                            <optgroup :label="$root.getLz('term.sortOrder')">
                                <option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option>
                                <option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option>
                            </optgroup>
                        </select>
                    </div>
                    <!-- <div class="col">
                        <select class="md-select" v-model="library.artists.viewAs">
                            <optgroup label="View As">
                                <option value="covers">Cover Art</option>
                                <option value="list">List</option>
                            </optgroup>
                        </select>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="well">
            <!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
            </mediaitem-square> -->
            <libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
            </libraryartist-item>
        </div>
    </div>