<!--
 ~ 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="d-flex align-items-center px-2p5 pb-3">
        <input type="search" class="form-control"
               th:placeholder="#{keyword}"
               oninput="ezyadmin.onKeydownToSearchMedia(this);"
               onkeydown="ezyadmin.onKeydownToSearchMedia(this);">
        <select class="form-control w-30p"
                onchange="ezyadmin.onSearchMediaTypeChanged(this);">
            <option value="">[[#{all}]]</option>
            <option th:each="searchMediaType : ${searchMediaTypes}"
                    th:value="${searchMediaType}">
                [[#{${searchMediaType.toString().toLowerCase()}}]]
            </option>
        </select>
    </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>
