<!-- Modal -->
<div class="modal fade" id="amazonItemModal" role="dialog" aria-labelledby="amazonItemModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="amazonItemModalLabel">Product Info</h4>
            </div>
            <div class="modal-body">
                <div class="col-sm-12">
                    <form class="form-horizontal">
                        <input type="text" name="videos" class="hide">
                        <div class="form-group"></div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">Title</label>
                            <div class="col-sm-11">
                                <input type="text" class="form-control ds-amz-title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">ASIN</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control ds-amz-asin">
                            </div>

                            <label class="col-sm-1 control-label">Price</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control ds-amz-price">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">AMZ Category</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control ds-amz-category" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Coupang Category</label>
                            <div class="col-sm-10">
                                <select class="form-control btn btn-default ds-coupang-category-select">
                                    <option value="">Select Category</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12">
                                <textarea id="amazonProductDetail"></textarea>
                            </div>
                        </div>

                        <div class="form-group ds-item-attributes">
                            <label class="col-sm-3">Legal Customer Notification</label>
                            <div class="col-sm-12">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href=".ds-coupang-attributes" aria-controls="ds-coupang-attributes" role="tab" data-toggle="tab">Attributes</a></li>
                                    <li role="presentation"><a href=".ds-coupang-notification" aria-controls="ds-coupang-notifications" role="tab" data-toggle="tab">Notifications</a></li>
                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active ds-coupang-attributes">
                                        <div style="margin: 10px 0">
                                            <div class="ds-coupang-attribute-names" style="margin-top:10px">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Name</th>
                                                            <th scope="col">Value</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr style="display:none">
                                                            <td>sample</th>
                                                            <td><input type="text" value="상세정보 별도 표기"></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div role="tabpanel" class="tab-pane ds-coupang-notification">
                                        <div style="margin: 10px 0">
                                            <select class="form-control">
                                                <option value="">Choose Notification Category</option>
                                            </select>
                                            <div class="ds-coupang-notification-names" style="margin-top:10px">
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Name</th>
                                                            <th scope="col">Value</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr style="display:none">
                                                            <td>sample</th>
                                                            <td><input type="text" value="상세정보 별도 표기"></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
            <div class="modal-footer selamat-text-center">
                <button type="button" class="btn btn-default" data-dismiss="modal">취소</button>
                <button type="button" class="btn btn-primary ds-send-newitem-coupang">저장</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.tiny.cloud/1/tr5ev698ebf9vypaelbown9i9fbs39ylgx1homhnby9b9z1o/tinymce/5/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: 'textarea#amazonProductDetail',
        plugins: 'print preview fullpage paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
        imagetools_cors_hosts: ['picsum.photos'],
        menubar: 'file edit view insert format tools table help',
        toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
        toolbar_sticky: true,
        autosave_ask_before_unload: true,
        autosave_interval: "30s",
        autosave_prefix: "{path}{query}-{id}-",
        autosave_restore_when_empty: false,
        autosave_retention: "2m",
        image_advtab: true,
        content_css: [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tiny.cloud/css/codepen.min.css'
        ],
        link_list: [{
                title: 'My page 1',
                value: 'http://www.tinymce.com'
            },
            {
                title: 'My page 2',
                value: 'http://www.moxiecode.com'
            }
        ],
        image_list: [{
                title: 'My page 1',
                value: 'http://www.tinymce.com'
            },
            {
                title: 'My page 2',
                value: 'http://www.moxiecode.com'
            }
        ],
        image_class_list: [{
                title: 'None',
                value: ''
            },
            {
                title: 'Some class',
                value: 'class-name'
            }
        ],
        importcss_append: true,
        height: 400,
        file_picker_callback: function(callback, value, meta) {
            /* Provide file and text for the link dialog */
            if (meta.filetype === 'file') {
                callback('https://www.google.com/logos/google.jpg', {
                    text: 'My text'
                });
            }

            /* Provide image and alt text for the image dialog */
            if (meta.filetype === 'image') {
                callback('https://www.google.com/logos/google.jpg', {
                    alt: 'My alt text'
                });
            }

            /* Provide alternative source and posted for the media dialog */
            if (meta.filetype === 'media') {
                callback('movie.mp4', {
                    source2: 'alt.ogg',
                    poster: 'https://www.google.com/logos/google.jpg'
                });
            }
        },
        templates: [{
                title: 'New Table',
                description: 'creates a new table',
                content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>'
            },
            {
                title: 'Starting my story',
                description: 'A cure for writers block',
                content: 'Once upon a time...'
            },
            {
                title: 'New list with dates',
                description: 'New List with dates',
                content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>'
            }
        ],
        template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
        template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
        height: 600,
        image_caption: true,
        quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
        noneditable_noneditable_class: "mceNonEditable",
        toolbar_drawer: 'sliding',
        contextmenu: "link image imagetools table",
    });
</script>