<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{ezyadmin}">

<body>
<div layout:fragment="content">
    <div class="px-2p5 pb-3">
        <div class="row">
            <div class="col-lg-3 col-md-4 page-search">
                <input type="search" class="form-control"
                   th:placeholder="#{keyword}"
                   oninput="ezyadmin.onKeydownToSearchMedia(this);"
                   onkeydown="ezyadmin.onKeydownToSearchMedia(this);">
            </div>
            <div class="col-lg-3 col-md-4 page-search">
                <select class="form-control"
                        onchange="ezyadmin.onSearchMediaTypeChanged(this);">
                    <option value="">[[#{all_type}]]</option>
                    <option th:each="searchMediaType : ${searchMediaTypes}"
                            th:value="${searchMediaType}">
                        [[#{${searchMediaType.toString().toLowerCase()}}]]
                    </option>
                </select>
            </div>
            <div class="col-lg-3 col-md-4 page-search">
                <select class="form-control"
                        onchange="ezyadmin.onSearchMediaStatusChanged(this);">
                    <option value="">[[#{all_status}]]</option>
                    <option th:each="searchStatus : ${searchMediaStatuses}"
                            th:value="${searchStatus}">
                        [[#{${searchStatus.toString().toLowerCase()}}]]
                    </option>
                </select>
            </div>
            <div class="col-lg-3 col-md-4 page-search">
                <select class="form-control"
                        onchange="ezyadmin.onSearchMediaSortOrderChanged(this);">
                    <option value="">[[#{sort_by}]]</option>
                    <option th:each="sortOrder : ${searchMediaSortOrders}"
                            th:value="${sortOrder}">
                        [[#{${'sort_by_' + sortOrder.toString().toLowerCase()}}]]
                    </option>
                </select>
            </div>
        </div>
    </div>
    <div class="text-center media-list-page">
        <ul class="media-list" id="mediaListBody"></ul>
    </div>
    <div class="d-flex flex-column text-center">
        <span>
            [[#{showing}]] <span id="mediaCountText">30</span>
            [[${#strings.toLowerCase(#messages.msg('of'))}]]
            <span id="totalMediaText">150</span>
            [[${#strings.toLowerCase(#messages.msg('media_items'))}]]
        </span>
        <div class="mb-3">
            <button class="btn btn-primary pl-5 pr-5 mt-2" id="loadMoreMediaButton">
                [[#{load_more}]]
            </button>
        </div>
    </div>
</div>
<script layout:fragment="scripts">
ezyadmin.onNewButtonClick = function() {
    ezyadmin.showAddNewMediaModal();
}

ezyadmin.fetchMediaList();
</script>
</body>

</html>
