<!--views/admin/index.ejs-->
<link rel="stylesheet" href="/styles/admin/index.css" />
<script src="/scripts/paginate.js"></script>

<section class="Header">
    <div class="wrapper region">
        <div class="logo"><%= data.pageTitle %></div>
        <form action="/admin/search" method="post">
            <select name="adminSelect">
                <option>ទំនិញ</option>
                <option>ប្រភេទ</option>
            </select>
            <input type="text" name="q" placeholder="Search" required />
            <input type="submit" value="ស្វែង​រក" />
        </form>
        <div class="logout"><a href="/">ទំព័រ​មុខ</a> | <a href="/login/logout">ចេញក្រៅ</a></div>
    </div>
</section>

<section class="Main">
    <div class="wrapper region">
        <div class="sidebar">
            <div class="inner">
                <a href="/admin/post"><img src="/images/bigsale.png" /></a>
                <a href="/admin/post" class="title">ទំនិញ</a>

                <a href="/admin/category"><img src="/images/category.png" /></a>
                <a href="/admin/category" class="title">ប្រភេទ</a>

                <a href="/admin/upload"><img src="/images/upload.png" /></a>
                <a href="/admin/upload" class="title">Upload</a>

                <a href="/admin/user"><img src="/images/users.png" /></a>
                <a href="/admin/user" class="title">អ្នក​ប្រើប្រាស់</a>

                <a href="/admin/setting"><img src="/images/setting.png" /></a>
                <a href="/admin/setting" class="title">Setting</a>
            </div>
        </div>
        <div class="content">
            <% if(data.route === '/admin/category'){ %>
                <%- include('category.ejs') %>
            <% }else if(data.route === '/admin/post'){ %>
                <%-include('post.ejs') %>
            <% } %>
        </div>
    </div>
</section>

<section class="Footer region">
    <% if(data.count){ %>
        <div class="info">សរុប​ទាំងអស់​មាន​ចំនួនៈ <%= data.count %></div>
    <% }else{ %>
        <div class="info">សរុប​ទាំងអស់​មាន​ចំនួនៈ</div>
    <% } %>
    <ul class="list">
        <% if(data.items){ %>
            <% for(let item of data.items) { %>
                <li>
                    <div class='thumb'>
                        <a href='/<%= data.type %>/<%= item.id %>'><img src='<%= item.thumb %>'/></a>  
                    </div>
                    <div class="title">
                        <a href="/<%= data.type %>/<%= item.id %>"><%= item.title %></a>
                        <div><%= (new Date(item.postdate)).toLocaleDateString('it-IT') %></div>
                    </div>
                    <div class="edit">
                        <a href="<%= data.route %>/edit/<%= item.id %>"><img src="/images/edit.png"/></a>
                        <a href="<%= data.route %>/delete/<%= item.id %>"><img src="/images/delete.png"/></a>
                    </div> 
                </li>
            <% } %>
        <% } %>
    </ul>
    <div class="pagination">
        <img onClick="paginate('<%= data.route %>')" src="/images/load-more.png" />
    </div>
    <div class="credit">&copy; 2022 <a href="https://khmerweb.vercel.app/">Khmer Web</a></div>
</section>

<!--views/admin/post.ejs-->
<link rel="stylesheet" href="/styles/admin/post.css" />
<script src="/scripts/ckeditor/ckeditor.js"></script>
<script src="/scripts/addCategory.js"></script>
<script src="/scripts/video.js"></script>

<section class="Post">
    <form action="/admin/post" method="post">
        <input type="text" name="title" required placeholder="ឈ្មោះ​ទំនិញ" />
        <textarea name="content" id="editor"></textarea>
        <input type="text" name="categories" required placeholder="​​​​​​​​​​​​​​​ប្រភេទទំនិញ" />
        <div class="wrapper">
            <select id="category" onChange="getCategory()">
                <option>ជ្រើសរើស​ប្រភេទ​ទំនិញ</option>
                <% for(let category of data.categories){ %>
                    <option><%= category.title %></option>
                <% } %>
            </select>
            <input type="number" name="price" required placeholder="$00.00" />
            <input type="text" name="thumb" required placeholder="តំណរភ្ជាប់​រូប​​​​​​​​​​​​​​​​​​​​​​​​​​តំណាង" />
            <input type="submit" value="ចុះ​ផ្សាយ" />
            <input type="tel" name="phone" pattern="^[0-9-+\s()]*$" required placeholder="​​លេខ​ទូរស័ព្ទ" />
            <input type="email" name="email" placeholder="Email" />
            <input type="datetime-local" name="postdate" required />
            <input type="button" />
        </div>
        <input name='entries' value='' type='hidden' />
    </form>

    <div class='form'>
        <select name='type'>
            <option>YouTube</option>
            <option>YouTubePlaylist</option>
            <option>Facebook</option>
            <option>OK</option>
            <option>Dailymotion</option>
            <option>Vimeo</option>
        </select>
        <input name='id' type='text' placeholder="អត្តសញ្ញាណវីដេអូ" required />
        <select name='ending'>
            <option>ចប់​</option>
            <option>មិន​ទាន់ចប់</option>
            <option>~ ចប់</option>
        </select>
        <input onclick='genJson()' type="button" value="បញ្ចូល​វីដេអូ" />
    </div>

    <table class='viddata'></table>

</section>
<script src="/scripts/ckeditor/config.js"></script>

/* static/admin/post.css */
.Post form input,.Post form select,
.Post .form input,.Post .form select{
    font: var(--body-font);
    padding: 2px 5px;
    width: 100%;
}

.Post form .ck-editor__editable{
    min-height: 300px;
}

.Post form .wrapper,.Post .form{
    display: grid;
    grid-template-columns: 25% 30% auto 15%;
}

.Post table {
    margin-top: 0px;
    width: 100%;
    border-collapse: collapse;
}

.Post table, td, th {
    border: 1px solid black;
    background: white;
    color: black;
    text-align: center;
    padding: 5px;
}

.Post table, th {
    background: #ddd;
}

.Post table .episode:hover{
    cursor: pointer;
    color: red;
}

Heroku: https://khmerweb-sale.herokuapp.com/login