<!--views/dashboard/admin.tpl-->
% rebase('base.tpl')

<link href="/static/styles/partials/header.css" rel="stylesheet"></link>
<script src="/static/scripts/paginate.js"></script>
<section class='Head'>
    <header class='region'>
        <div class='site-logo'>{{ data['pageTitle'] }}</div>

        <form action='/backend/search' method='post'>
            <select name="select">
                <option>ការផ្សាយ</option>
                <option>ជំពូក</option>
                <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>
    </header>
</section>

<link href="/static/styles/partials/body.css" rel="stylesheet"></link>
<section class='Body region'>
    
    %include('backend/menu.tpl')

    <%
    if 'post' in data['route']:
        include('backend/post.tpl')
    end
    %>

</section>

<!--views/dashboard/post.tpl-->
<link rel='stylesheet' href='/static/styles/post.css' />
<script src="/static/scripts/ckeditor/ckeditor.js"></script>
<script src="/static/scripts/video.js"></script>

<section class='Main'>
    <div class='content'>
        <form action='/dashboard/post' method='post' >
            %if 'edit' in data:
            <input type='text' name='title' value='{{data["item"][0]}}' placeholder='ចំណងជើង' required />
            <textarea name="content" id="editor" >{{data["item"][4]}}</textarea>
            <div class='wrapper'>
                <select name='category' class='category' >
                    %if 'categories' in data:
                    %for category in data['categories']:
                        <option>{{ category[0] }}</option>
                    %end
                    %end
                </select>
                <script>$(".category").val("{{data['item'][5]}}").change();</script>
                <input type='text' name='thumb' value='{{data["item"][1]}}' required placeholder="តំណរ​ភ្ជាប់​រូប​តំណាង" />
                <input type='datetime-local' value='{{data["item"][2]}}' name='datetime' required />
                <input type='hidden' name='editid' value='{{data["item"][3]}}' />
                <input type='submit' value='ចុះ​ផ្សាយ' />
            </div>
            <input name='entries' value='{{!data["item"][6]}}' type='hidden' />
            %else:
            <input type='text' name='title' placeholder='ចំណងជើង' required />
            <textarea name="content" id="editor" ></textarea>
            <div class='wrapper'>
                <select name='category'>
                    %if 'categories' in data:
                    %for category in data['categories']:
                        <option>{{ category[0] }}</option>
                    %end
                    %end
                </select>
                <input type='text' name='thumb' required placeholder="តំណរ​ភ្ជាប់​រូប​តំណាង" />
                <input type='datetime-local' value='' name='datetime' required />
                <input type='submit' value='ចុះ​ផ្សាយ' />
            </div>
            <input name='entries' value='' type='hidden' />
            %end
        </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>
            </select>
            <input onclick='genJson()' type="button" value="បញ្ចូល​វីដេអូ" />
        </div>

        <table class='viddata'></table>
        
        %if 'edit' in data:
            <script>
                var entries = JSON.parse('{{!data["item"][6]}}')
            </script>
        %end

        <script>
        if(entries.length > 0){

            let html = ``
            for(let v in entries){
                episode += 1
                html += `<tr>`
                html += `<td title="Delete" onClick="deleteRow(event)" class="episode">${episode}</td>`
                html += `<td class="td${episode}">${entries[v].type}</td>`
                html += `<td class="td${episode}">${entries[v].id}</td>`
                html += `<td class="td${episode}">${entries[v].ending}</td>`
                html += `</tr>`
            }

            if($('.viddata').html() === ''){
                $('.viddata').append('<tr>')
                $('.viddata').append('<th>ភាគ/លុប</th>')
                $('.viddata').append('<th>ប្រភេទ​</th>')
                $('.viddata').append('<th>អត្តសញ្ញាណ​</th>')
                $('.viddata').append('<th>ចប់ឬ​នៅ?</th>')
                $('.viddata').append('</tr>')
            }

            $('.viddata').append(`${html}`)

        }
        </script>

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

/*asset/css/post.css*/
.Main .content .ck-editor__editable{
    min-height: 350px;
    color: black;
}

.Main .content .form,
.Main .content form .wrapper{
    margin-top:5px;
    display: grid;
    grid-template-columns: 20% auto 30% 15%;
}

.Main .content form input, 
.Main .content form select,
.Main .content .form input,
.Main .content .form select
{
    font: var(--body-font);
    width: 100%;
    padding: 5px;
}

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

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

.Main .content table, th {
    background: #ddd;
}

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

.Main .item{
    margin-top: 5px;
    display: grid;
    grid-template-columns: 20% auto 20%;
    grid-gap: 10px;
    align-items: center;
    background: var(--background-light);
}

.Main .item .thumb{
    position: relative;
    padding-top: 56.25%
}

.Main .item .thumb img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.Main .item .title-date, .Main .item .title-date a{
    color: black;
}

.Main .item .edit-delete{
    text-align: right;
    padding-right: 10px;
    visibility: hidden;
}

.Main .item .edit-delete img{
    width: 35px;
}

.Main .item:hover .edit-delete{
    visibility: visible;
}

GitHub: https://github.com/Sokhavuth/khmerweb-multimedia

Vercel: https://khmerweb-multimedia.vercel.app/