idsci/application/index/view/user/submit_manuscript.html

<style>
    .profile-avatar-container {
        position:relative;
        width:100px;
    }
    .profile-avatar-container .profile-user-img{
        width:100px;
        height:100px;
    }
    .profile-avatar-container .profile-avatar-text {
        display:none;
    }
    .profile-avatar-container:hover .profile-avatar-text {
        display:block;
        position:absolute;
        height:100px;
        width:100px;
        background:#444;
        opacity: .6;
        color: #fff;
        top:0;
        left:0;
        line-height: 100px;
        text-align: center;
    }
    .profile-avatar-container button{
        position:absolute;
        top:0;left:0;width:100px;height:100px;opacity: 0;
    }
</style>
<link href="__CDN__/assets/css/user/submit_manuscript.css?v={$Think.config.site.version|htmlentities}" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="common-bg pt-4">
    <div class="common-font" style="position: static;transform: none">
        Author Menu
    </div>
    {if condition="$user.workplace != '' && $user.job_type != '' && $user.title != '' && $user.first_name != '' && $user.last_name != '' && $user.affiliation != '' && $user.address != '' && $user.zip_code != ''"}
    <div class="row step-content">
        <div class="col-md-12">
            <ul class="nav-justified">
                <div class="nav-item">
                    <li class="active nav-li">
                        <a href="#">1</a>
                        <img src="__CDN__/assets/img/index/submit_on_circle.png" alt="" style="display: none;">
                    </li>
                    <div class="nav-content">
                        <div class="nav-li-title">
                            Upload Manuscript
                            <div class="arrow">
                                <span class="line"></span>
                            </div>
                        </div>
                        <div class="nav-li-desc finish">Here you can upload your</div>
                    </div>
                </div>
                <div class="nav-item">
                    <li class="nav-li">
                        <a href="#">2</a>
                    </li>
                    <div class="nav-content">
                        <div class="nav-li-title">
                            Manuscript Information
                            <div class="arrow">
                                <span class="line"></span>
                            </div>
                        </div>
                        <div class="nav-li-desc">You can submit your manuscript</div>
                    </div>
                </div>
                <div class="nav-item">
                    <li class="nav-li">
                        <a href="#">3</a>
                    </li>
                    <div class="nav-content">
                        <div class="nav-li-title">
                            Author Information
                            <div class="arrow">
                                <span class="line"></span>
                            </div>
                        </div>
                        <div class="nav-li-desc">Here you can upload author</div>
                    </div>
                </div>
                <div class="nav-item">
                    <li class="nav-li">
                        <a href="#">4</a>
                    </li>
                    <div class="nav-content">
                        <div class="nav-li-title">
                            Statement
                            <div class="arrow" style="width: 90px">
                                <span class="line"></span>
                            </div>
                        </div>
                        <div class="nav-li-desc">We need to understand your interests</div>
                    </div>
                </div>
                <div class="nav-item">
                    <li class="nav-li">
                        <a href="#">5</a>
                    </li>
                    <div class="nav-content">
                        <div class="nav-li-title">
                            Recommended
                            <div class="arrow" style="width: 60px">
                                <span class="line"></span>
                            </div>
                        </div>
                        <div class="nav-li-desc">Here you can recommend</div>
                    </div>
                </div>
                <div class="nav-item">
                    <li class="nav-li">
                        <a href="#">6</a>
                    </li>
                    <div class="nav-content">
                        <div class="nav-li-title">
                            Confirm and send to
                        </div>
                        <div class="nav-li-desc">Confirm your information and submit</div>
                    </div>
                </div>
            </ul>
        </div>
    </div>
    {/if}
</div>

<div id="content-container" class="container">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="header-content">
                        <h2 class="page-header">Upload Manuscript</h2>

                        <div class="header-button-content recommended-button" style="display: none">
                            <div class="recommended-button-item">
                                <div class="header-button-item reviewer-list-button" style="margin-right: 70px" data-toggle="modal" data-target="#myModal">
                                    <img src="__CDN__/assets/img/index/optinal_reviewer_icon.png" alt="">
                                    Optinal reviewer
                                </div>
                                <div class="header-button-item reviewer-add-button" style="margin-right: 70px" data-toggle="modal" data-target="#addReviewModal">
                                    <img src="__CDN__/assets/img/index/invite_line_icon.png" alt="">
                                    Add other reviewers
                                </div>
                            </div>
                        </div>

                        <div class="header-button-content author-button" style="display: none">
                            <div class="author-button-item">
                                <div class="header-button-item" style="margin-right: 5px">
                                    + Add Author
                                </div>
                            </div>
                        </div>
                    </div>

                    {if condition="$user.workplace != '' && $user.job_type != '' && $user.title != '' && $user.first_name != '' && $user.last_name != '' && $user.affiliation != '' && $user.address != '' && $user.zip_code != ''"}
                    <form id="submit-manuscript-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('api/user/submit_manuscript')}">
                        {:token()}
                        <input id="c-manuscript_id" type="hidden" name="row[id]" value="{$row.id}">
                        <div class="form-item manuscript-content">
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    <span style="color:#ed534b;margin-right: 10px;">*</span>Manuscript ( Word / Zip )：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group">
                                        <input id="c-manuscript-zip" data-rule="required" class="form-control" name="row[manuscript_zip]" type="text" value="{$row.manuscript_zip|htmlentities}">
                                        <div class="input-group-addon no-border no-padding">
                                            <span><button type="button" id="plupload-images" class="btn btn-danger plupload" data-input-id="c-manuscript-zip" data-multiple="true" data-mimetype="word,zip,doc,docx,psd" data-preview-id="p-manuscript-zip"><i class="fa fa-upload"></i> Upload</button></span>
                                            <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-manuscript-zip" data-preview-id="p-manuscript-zip" data-mimetype="word,zip,doc,docx,psd" data-multiple="true"><i class="fa fa-list"></i> Choose</button></span>
                                            <span class="msg-box n-right" for="c-manuscript-zip"></span>
                                        </div>
                                    </div>
                                    <ul class="row list-inline plupload-preview" id="p-manuscript-zip"></ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    Manuscript ( PDF Version )：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group">
                                        <input id="c-manuscript-pdf" class="form-control" name="row[manuscript_pdf]" type="text" value="{$row.manuscript_pdf|htmlentities}">
                                        <div class="input-group-addon no-border no-padding">
                                            <span><button type="button" id="c-manuscript-pdf-plupload-images" class="btn btn-danger plupload" data-input-id="c-manuscript-pdf" data-multiple="true" data-mimetype="pdf" data-preview-id="p-manuscript-pdf"><i class="fa fa-upload"></i> Upload</button></span>
                                            <span><button type="button" id="c-manuscript-pdf-fachoose-images" class="btn btn-primary fachoose" data-input-id="c-manuscript-pdf" data-preview-id="p-manuscript-pdf" data-mimetype="pdf" data-multiple="true"><i class="fa fa-list"></i> Choose</button></span>
                                            <span class="msg-box n-right" for="c-manuscript-pdf"></span>
                                        </div>
                                    </div>
                                    <ul class="row list-inline plupload-preview" id="p-manuscript-pdf"></ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">Cover Letter：</label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group">
                                        <input id="c-cover_letter" class="form-control" name="row[cover_letter]" type="text" value="{$row.cover_letter|htmlentities}">
                                        <div class="input-group-addon no-border no-padding">
                                            <span><button type="button" id="c-cover_letter-plupload-images" class="btn btn-danger plupload" data-input-id="c-cover_letter" data-multiple="true" data-mimetype="image/* data-preview-id="p-cover_letter"><i class="fa fa-upload"></i> Upload</button></span>
                                            <span><button type="button" id="c-cover_letter-fachoose-images" class="btn btn-primary fachoose" data-input-id="c-cover_letter" data-preview-id="p-cover_letter" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> Choose</button></span>
                                            <span class="msg-box n-right" for="c-cover_letter"></span>
                                        </div>
                                    </div>
                                    <ul class="row list-inline plupload-preview" id="p-cover_letter"></ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    Graphical Abstract：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group">
                                        <input id="c-graphical_abstract" class="form-control" name="row[graphical_abstract]" type="text" value="{$row.graphical_abstract|htmlentities}">
                                        <div class="input-group-addon no-border no-padding">
                                            <span><button type="button" id="c-graphical_abstract-plupload-images" class="btn btn-danger plupload" data-input-id="c-graphical_abstract" data-multiple="true" data-preview-id="p-graphical_abstract"><i class="fa fa-upload"></i> Upload</button></span>
                                            <span><button type="button" id="c-graphical_abstract-fachoose-images" class="btn btn-primary fachoose" data-input-id="c-graphical_abstract" data-preview-id="p-graphical_abstract" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> Choose</button></span>
                                            <span class="msg-box n-right" for="c-graphical_abstract"></span>
                                        </div>
                                    </div>
                                    <ul class="row list-inline plupload-preview" id="p-graphical_abstract"></ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    Non-published Material：
                                    <div>( Word / Zip / PDF )</div>
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group">
                                        <input id="c-non_material" class="form-control" name="row[non_material]" type="text" value="{$row.non_material|htmlentities}">
                                        <div class="input-group-addon no-border no-padding">
                                            <span><button type="button" id="c-non_material-plupload-images" class="btn btn-danger plupload" data-input-id="c-non_material" data-multiple="true" data-mimetype="word,doc,docx,zip,pdf" data-preview-id="p-non_material"><i class="fa fa-upload"></i> Upload</button></span>
                                            <span><button type="button" id="c-non_material-fachoose-images" class="btn btn-primary fachoose" data-input-id="c-non_material" data-preview-id="p-non_material" data-mimetype="word,doc,docx,zip,pdf" data-multiple="true"><i class="fa fa-list"></i> Choose</button></span>
                                            <span class="msg-box n-right" for="c-non_material"></span>
                                        </div>
                                    </div>
                                    <ul class="row list-inline plupload-preview" id="p-non_material"></ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    Copyright Permisson Files：
                                    <div>( Zip / PDF )</div>
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group mb-3">
                                        <div class="radio radio-inline pl-0">
                                            <label for="copyright-here"><input id="copyright-here" name="row[is_copyright]" type="radio" value="normal" {if condition="$row.is_copyright == 'normal' "}checked{/if} />Upload here</label>
                                            <label for="copyright-copyrights"><input id="copyright-copyrights" name="row[is_copyright]" type="radio" value="hidden" {if condition="$row.is_copyright == 'hidden' "}checked{/if} />No copyrights issues</label>
                                        </div>
                                    </div>
                                    <div class="input-group copyright_files" style="display: none;">
                                        <input id="c-copyright_files" class="form-control" name="row[copyright_files]" type="text" value="{$row.copyright_files|htmlentities}">
                                        <div class="input-group-addon no-border no-padding">
                                            <span><button type="button" id="c-copyright_files-plupload-images" class="btn btn-danger plupload" data-input-id="c-copyright_files" data-multiple="true" data-mimetype="zip,pdf" data-preview-id="p-copyright_files"><i class="fa fa-upload"></i> Upload</button></span>
                                            <span><button type="button" id="c-copyright_files-fachoose-images" class="btn btn-primary fachoose" data-input-id="c-copyright_files" data-preview-id="p-copyright_files" data-mimetype="zip,pdf" data-multiple="true"><i class="fa fa-list"></i> Choose</button></span>
                                            <span class="msg-box n-right" for="c-copyright_files"></span>
                                        </div>
                                    </div>
                                    <ul class="row list-inline plupload-preview" id="p-copyright_files"></ul>
                                </div>
                            </div>

                            <hr>

                            <!-- tips -->
                            <div class="form-group">
                                <div class="col-xs-12 col-sm-12">
                                    Authors should obtain permission to reproduce any published material (figures, schemes, tables, or any extract of a text) that does not fall into the public domain, or for which they do not hold the copyright. Permission should be requested by the authors from the copyrightholder.                                 for more details. If you have obtained permission, please upload related files in the below frame; if the manuscript does not involve copyright issues, please choose “no copyrights issues”.
                                </div>
                            </div>
                        </div>

                        <!-- 稿件信息 -->
                        <div class="form-item journal-content" style="display: none">
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">Cover Image：</label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group">
                                        <input id="c-image" class="form-control" name="row[image]" type="text" value="{$row.image|htmlentities}">
                                        <div class="input-group-addon no-border no-padding">
                                            <span><button type="button" id="c-image-plupload-images" class="btn btn-danger plupload" data-input-id="c-image" data-multiple="true" data-mimetype="image/*" data-preview-id="p-image"><i class="fa fa-upload"></i> Upload</button></span>
                                            <span><button type="button" id="c-image-fachoose-images" class="btn btn-primary fachoose" data-input-id="c-image" data-preview-id="p-image" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> Choose</button></span>
                                            <span class="msg-box n-right" for="c-image"></span>
                                        </div>
                                    </div>
                                    <ul class="row list-inline plupload-preview" id="p-image"></ul>
                                    <span  class="msg-box" style="color: #f00;line-height: 25px">Recommended size：205*100px</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    <span style="color:#ed534b;margin-right: 10px;">*</span>Choose Journal：
                                </label>
                                <div class="col-xs-12 col-sm-8">
<!--                                    <select id="c-journal" data-rule="required" class="form-control" name="row[journal]">-->
<!--                                        <option value="">Please select</option>-->
<!--                                        {cms:channellist id="channel" type="son" typeid="1"}-->
<!--                                        <option value="{$channel.id}" {if condition="$row.journal == $channel.id"}selected{/if}>{$channel.name}</option>-->
<!--                                        {/cms:channellist}-->
<!--                                    </select>-->
                                    <input id="c-journal" data-rule="required" data-source="user/choose_journal" data-params='{"type":"author"}' data-primary-key="id" data-search-field="name" class="form-control selectpage" name="row[journal]" type="text" value="{$row.journal}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    <span style="color:#ed534b;margin-right: 10px;">*</span>Choose Article Type：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <select id="c-article-type" data-rule="required" class="form-control" name="row[article_type]">
                                        <option value="">Please select</option>
                                        {foreach name="site.manuscript_article_type" item="vo"}
                                        <option value="{$key}" {in name="key" value="$row.article_type" }selected{/in}>{$vo}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    <span style="color:#ed534b;margin-right: 10px;">*</span>Title：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <textarea id="c-title" data-rule="required" class="form-control editor" name="row[title]" rows="15" placeholder="Type here...">{$row.title|htmlentities}</textarea>
                                    <div class="input-group-addon no-border no-padding">
                                        <span class="msg-box n-right" for="c-title"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    <span style="color:#ed534b;margin-right: 10px;">*</span>Abstract：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <textarea id="c-abstract" data-rule="required" class="form-control editor" name="row[abstract]" rows="15" placeholder="Type here...">{$row.abstract|htmlentities}</textarea>
                                    <div class="input-group-addon no-border no-padding">
                                        <span class="msg-box n-right" for="c-abstract"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">
                                    <span style="color:#ed534b;margin-right: 10px;">*</span>Keywords：
                                </label>
                                <div class="col-xs-12 col-sm-8">
<!--                                    <input type="text" data-rule="required" data-role="tagsinput" class="form-control" id="c-keywords" name="row[keywords]" value="{$row.keywords|htmlentities}" placeholder="Type here...">-->
                                    <textarea id="c-keywords" data-rule="required" class="form-control editor" name="row[keywords]" rows="15" placeholder="Type here...">{$row.keywords|htmlentities}</textarea>
                                    <div class="input-group-addon no-border no-padding">
                                        <span class="msg-box n-right" for="c-keywords"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4">Number of Pages：</label>
                                <div class="col-xs-12 col-sm-8">
                                    <input type="text" class="form-control" id="c-number_page" name="row[number_page]" value="{$row.number_page|htmlentities}" placeholder="Type here...">
                                </div>
                            </div>
                        </div>

                        <!-- 作者信息 -->
                        <div class="form-item add-author-content" id="box" style="display: none">
                            {if condition="!$row.id"}
                            <div class="add-author-item pt-4">
                                <div class="form-group author-content-button-item">
                                    <div class="author-sort-button text-sort-button text-button">
                                        <i class="fa fa-sort"></i> Sort
                                    </div>
                                    <div class="author-delete-button text-delete-button text-button">
                                        <i class="fa fa-trash"></i> Delete
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Institution E-Mail Address：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" data-rule="required" class="form-control" id="c-email" name="row[author][0][email]" value="{$user.email}" placeholder="Type here...">
                                        <div class="input-group-addon no-border no-padding">
                                            <span class="msg-box n-right" for="c-email"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>First Name：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" data-rule="required" class="form-control" id="c-first-name" name="row[author][0][first_name]" value="{$user.first_name}" placeholder="Type here...">
                                        <div class="input-group-addon no-border no-padding">
                                            <span class="msg-box n-right" for="c-first_name"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        Middle Name：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" class="form-control" id="c-middle-name" name="row[author][0][middle_name]" value="{$user.middle_name}" placeholder="Type here...">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        Last Name：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" class="form-control" id="c-last-name" name="row[author][0][last_name]" value="{$user.last_name}" placeholder="Type here...">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Display E-Mail：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group mb-3">
                                            <div class="radio radio-inline pl-0">
                                                <label for="c-e-mail-yes"><input data-rule="required" id="c-e-mail-yes" name="row[author][0][display_email]" type="radio" value="yes" checked/>Yes</label>
                                                <label for="c-e-mail-no"><input data-rule="required" id="c-e-mail-no" name="row[author][0][display_email]" type="radio" value="no"/>No</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Correspondsing Author：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group mb-3">
                                            <div class="radio radio-inline pl-0">
                                                <label for="c-correspondsing-author-yes"><input data-rule="required" id="c-correspondsing-author-yes" name="row[author][0][correspondsing_author]" type="radio" value="yes" checked/>Yes</label>
                                                <label for="c-correspondsing-author-no"><input data-rule="required" id="c-correspondsing-author-no" name="row[author][0][correspondsing_author]" type="radio" value="no" />No</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Affiliation：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input data-rule="required" type="text" class="form-control" id="c-author-affiliation" name="row[author][0][author_affiliation]" value="{$user.affiliation}" placeholder="Type here...">
                                        <div class="input-group-addon no-border no-padding">
                                            <span class="msg-box n-right" for="c-author-affiliation"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Country / Temitory：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <select id="c-author_country" data-rule="required" class="form-control" name="row[author][0][author_country]">
                                            <option value="">Please select</option>
                                            {foreach name="site.country" item="vo"}
                                            <option value="{$key}">{$vo}</option>
                                            {/foreach}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {else}
                            {foreach name="row.author_content" item="author"}
                            <div class="add-author-item">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-9">
                                    </label>
                                    <div class="author-delete-button text-delete-button mb-3 col-xs-12 col-sm-3">
                                        <i class="fa fa-trash"></i> Delete
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Institution E-Mail Address：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" data-rule="required" class="form-control" id="c-email" name="row[author][{$key}][email]" value="{$author.email}" placeholder="Type here...">
                                        <div class="input-group-addon no-border no-padding">
                                            <span class="msg-box n-right" for="c-email"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>First Name：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" data-rule="required" class="form-control" id="c-first-name" name="row[author][{$key}][first_name]" value="{$author.first_name}" placeholder="Type here...">
                                        <div class="input-group-addon no-border no-padding">
                                            <span class="msg-box n-right" for="c-first_name"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        Middle Name：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" class="form-control" id="c-middle-name" name="row[author][{$key}][middle_name]" value="{$author.middle_name}" placeholder="Type here...">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        Last Name：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input type="text" class="form-control" id="c-last-name" name="row[author][{$key}][last_name]" value="{$author.last_name}" placeholder="Type here...">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Display E-Mail：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group mb-3">
                                            <div class="radio radio-inline pl-0">
                                                <label for="c-e-mail-yes-{$key}"><input data-rule="required" id="c-e-mail-yes-{$key}" name="row[author][{$key}][display_email]" type="radio" value="yes" {if condition="$author.display_email == 'yes'"}checked{/if} />Yes</label>
                                                <label for="c-e-mail-no-{$key}"><input data-rule="required" id="c-e-mail-no-{$key}" name="row[author][{$key}][display_email]" type="radio" value="no" {if condition="$author.display_email == 'no'"}checked{/if} />No</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Correspondsing Author：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group mb-3">
                                            <div class="radio radio-inline pl-0">
                                                <label for="c-correspondsing-author-yes-{$key}"><input data-rule="required" id="c-correspondsing-author-yes-{$key}" name="row[author][{$key}][correspondsing_author]" type="radio" value="yes" {if condition="$author.correspondsing_author == 'yes'"}checked{/if} />Yes</label>
                                                <label for="c-correspondsing-author-no-{$key}"><input data-rule="required" id="c-correspondsing-author-no-{$key}" name="row[author][{$key}][correspondsing_author]" type="radio" value="no" {if condition="$author.correspondsing_author == 'no'"}checked{/if} />No</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Affiliation：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input data-rule="required" type="text" class="form-control" id="c-author-affiliation" name="row[author][{$key}][author_affiliation]" value="{$author.author_affiliation}" placeholder="Type here...">
                                        <div class="input-group-addon no-border no-padding">
                                            <span class="msg-box n-right" for="c-author-affiliation"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-4">
                                        <span style="color:#ed534b;margin-right: 10px;">*</span>Country / Temitory：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <select id="c-author_country" data-rule="required" class="form-control" name="row[author][{$key}][author_country]">
                                            <option value="">Please select</option>
                                            {foreach name="site.country" item="vo"}
                                            <option value="{$key}" {in name="key" value="$author.author_country" }selected{/in}>{$vo}</option>
                                            {/foreach}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {/foreach}
                            {/if}
                        </div>

                        <!-- 陈述 -->
                        <div class="form-item statement-content" style="display: none">
                            <div class="form-group">
                                <div class="col-xs-12 col-sm-12 statement-item-text">
                                    Please indicate if you received funding (institutional, private and/or corporate/private financial support) for the research reported in the manuscript.
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-3" style="text-align: left">
                                    Funding information
                                </label>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-3" style="text-align: left">
                                    I have received funding：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group mb-3">
                                        <div class="radio radio-inline pl-0">
                                            <label for="c-funding-yes"><input id="c-funding-yes" name="row[is_funding]" type="radio" value="normal" {if condition="$row.is_funding == 'normal'"}checked{/if} />Yes</label>
                                            <label for="c-funding-no"><input id="c-funding-no" name="row[is_funding]" type="radio" value="hidden" {if condition="$row.is_funding == 'hidden'"}checked{/if} />No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group funding_content" style="display: none;">
                                <label class="control-label col-xs-12 col-sm-3"></label>
                                <div class="col-xs-12 col-sm-8">
                                    <textarea id="c-funding_content" class="form-control editor" name="row[funding_content]" rows="15" placeholder="If 'yes', please add your funding unit and funding number...">{$row.funding_content|htmlentities}</textarea>
                                </div>
                            </div>

                            <hr>

                            <div class="form-group">
                                <div class="col-xs-12 col-sm-12 statement-item-text">
                                    We wish to draw the attention of the Editor to the following facts, which may be considered as potential conflicts of interest, and to significant financial contributions to this work.
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-4" style="text-align: left">
                                    Potential confilict of interest exists
                                </label>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-3">
                                    choose：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group mb-3">
                                        <div class="radio radio-inline pl-0">
                                            <label for="is-interest-yes"><input id="is-interest-yes" name="row[is_interest]" type="radio" value="normal" {if condition="$row.is_interest == 'normal'"}checked{/if} />Yes</label>
                                            <label for="is-interest-no"><input id="is-interest-no" name="row[is_interest]" type="radio" value="hidden" {if condition="$row.is_interest == 'hidden'"}checked{/if} />No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group interest_content" style="display: none;">
                                <label class="control-label col-xs-12 col-sm-3"></label>
                                <div class="col-xs-12 col-sm-8">
                                    <textarea id="c-interest_content" class="form-control editor" name="row[interest_content]" rows="15" placeholder="Type here...">{$row.interest_content|htmlentities}</textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-12 col-sm-12 statement-item-text" style="color: rgba(159,159,159,0.85);">
                                    <p>All forms of financial support received for this research by any institution, organization or private company.</p>
                                    <p>Any personal commercial or financial interest in the findings of the research.</p>
                                    <p>Any relationship with institutions, organizations or private companies, and other activities or relationships that may be perceived as unduly influencing the findings of the research.</p>
                                    <p>If in doubt, please select "Yes" and disclose any possible conflicts of interest.</p>
                                </div>
                            </div>

                            <hr>

                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-12" style="text-align: left">
                                    Has your article been published in another journal or has it been submitted to another journal
                                </label>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-3">
                                    choose：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group mb-3">
                                        <div class="radio radio-inline pl-0">
                                            <label for="is-another-choose-yes"><input id="is-another-choose-yes" name="row[statement_type]" type="radio" value="normal" {if condition="$row.statement_type == 'normal'"}checked{/if} />Yes</label>
                                            <label for="is-another-choose-no"><input id="is-another-choose-no" name="row[statement_type]" type="radio" value="hidden" {if condition="$row.statement_type == 'hidden'"}checked{/if} />No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 推荐 -->
                        <div class="form-item recommended-content" style="display: none">
                            <div class="form-group reviewer-hidden-content">
                                {if condition="$row.id"}
                                {foreach name="row.review_content" item="review"}
                                <input type="hidden" name="row[reviewer][{$key}][reviewer-name]" value="{$review['reviewer-name']}">
                                <input type="hidden" name="row[reviewer][{$key}][reviewer-email]" value="{$review['reviewer-email']}">
                                <input type="hidden" name="row[reviewer][{$key}][reviewer-first-name]" value="{$review['reviewer-first-name']}">
                                <input type="hidden" name="row[reviewer][{$key}][reviewer-last-name]" value="{$review['reviewer-last-name']}">
                                <input type="hidden" name="row[reviewer][{$key}][reviewer-affiliation]" value="{$review['reviewer-affiliation']}">
                                <input type="hidden" name="row[reviewer][{$key}][reviewer-field]" value="{$review['reviewer-field']}">
                                {/foreach}
                                {/if}
                            </div>

                            <div class="form-group">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="table-responsive">
                                        <table class="table inbox-table" id="recommended-table">
                                            <thead style="background: #FAFAFA;" class="thead">
                                            <tr>
                                                <th>Name</th>
                                                <th>E-mail Address</th>
                                                <th>First Name</th>
                                                <th width="100px">Last Name</th>
                                                <th>Affiliation</th>
                                                <th>Field</th>
                                                <th>Delete</th>
                                            </tr>
                                            </thead>
                                            <tbody class="tbody">
                                            {if condition="$row.id"}
                                            {foreach name="row.review_content" item="review"}
                                            <tr>
                                                <td><?php echo $review['reviewer-name'] ?></td>
                                                <td><?php echo $review['reviewer-email'] ?></td>
                                                <td><?php echo $review['reviewer-first-name'] ?></td>
                                                <td><?php echo $review['reviewer-last-name'] ?></td>
                                                <td><?php echo $review['reviewer-affiliation'] ?></td>
                                                <td><?php echo $review['reviewer-field'] ?></td>
                                                <td class="recommended-del"><a href="#">删除</a></td>
                                            </tr>
                                            {/foreach}
                                            {/if}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <h2 class="page-header">Suggest related articles</h2>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-3">
                                    Article1：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <input type="text" class="form-control" id="c-article-one" name="row[article_one]" value="{$row.article_one|htmlentities}" placeholder="Type here...">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-3">
                                    Article2：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <input type="text" class="form-control" id="c-article-two" name="row[article_two]" value="{$row.article_two|htmlentities}" placeholder="Type here...">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-3">
                                    Article3：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <input type="text" class="form-control" id="c-article-three" name="row[article_three]" value="{$row.article_three|htmlentities}" placeholder="Type here...">
                                </div>
                            </div>
                        </div>

                        <hr>

                        {if condition="$user->is_review == 'fault'"}
                        <div class="become-review" style="display: none">
                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-12" style="text-align: left">
                                    Are you willing to become a reviewer
                                </label>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-xs-12 col-sm-3">
                                    choose：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="input-group mb-3">
                                        <div class="radio radio-inline pl-0">
                                            <label for="is-become-review"><input id="is-become-review" name="row[is_become_review]" type="radio" value="normal" {if condition="$row.is_become_review == 'normal'"}checked{/if} />Yes</label>
                                            <label for="is-become-review"><input id="is-become-review" name="row[is_become_review]" type="radio" value="hidden" {if condition="$row.is_become_review == 'hidden'"}checked{/if} />No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group field_content" {if condition="$row.is_become_review == 'hidden' || $row.is_become_review == ''"}style="display: none;"{/if} {if condition="$row.is_become_review == 'normal'"}style="display: show;"{/if} >
                                <label class="control-label col-xs-12 col-sm-3">
                                    Field：
                                </label>
                                <div class="col-xs-12 col-sm-8">
                                    <input id="c-field" data-source="user/choose_field" data-primary-key="id" data-search-field="name" class="form-control selectpage" name="row[field]" type="text" value="{$row.field}">
                                </div>
                            </div>
                        </div>
                        {/if}

                        <div class="form-group normal-footer">
                            <label class="control-label col-xs-12 col-sm-4"></label>
                            <div class="col-xs-12 col-sm-8">
                                <button type="submit" class="btn btn-primary btn-embossed disabled submit-button" style="display: none">Submit</button>
                                <button type="button" class="btn btn-primary next-button">Procceed to the next step</button>
                            </div>
                        </div>
                    </form>
                    {else}
                    Please prioritize improving your personal information before proceeding with other operations, <a href="{:url('/index/user/profile')}">Please click here</a>
                    {/if}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="myModalLabel">
                    Recommended Reviewer
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <div class="modal-body">
                <!-- 表格 -->
                <table class="table" id="modal-table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>E-mail Address</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Affiliation</th>
                        <th>Field</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 表格内容 -->
                    <!-- 更多数据行 -->
                    </tbody>
                </table>

                <!-- 分页区域 -->
                <div id="modal-pagination" class="pagination"></div>

                <hr>

                <div class="table-footer-content">
                    <button class="btn btn-default footer-item table-footer-button-type add-review-button" style="margin-right: 20px">Add</button>
                    <button type="button" class="btn btn-default footer-item" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addReviewModal" tabindex="-1" role="dialog" aria-labelledby="addReviewModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="addReviewModalLabel">
                    Add Recommended Reviewer
                    <div class="header-button-content add-reviewer-button">
                        <div class="author-button-item">
                            <div class="header-button-item" style="margin-right: 70px">
                                + Add Reviewer
                            </div>
                        </div>
                    </div>
                    <button type="button" class="close mt-1" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <div class="modal-body">
                <div class="custom-reviewer-content">
                    <div class="custom-reviewer-item">
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-11">
                            </label>
                            <div class="reviewer-delete-button text-delete-button mb-3 col-xs-12 col-sm-1">
                                <i class="fa fa-trash"></i> Delete
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2 text-right">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Name
                            </label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="text" data-rule="required" class="form-control" id="c-add-review-name" name="row[reviewer][0][reviewer-name]" placeholder="Type here...">
                                <div class="input-group-addon no-border no-padding">
                                    <span class="msg-box n-right" for="c-add-review-name"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2 text-right">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>E-mail Address
                            </label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="text" data-rule="required" class="form-control" id="c-add-review-email" name="row[reviewer][0][reviewer-email]" placeholder="Type here...">
                                <div class="input-group-addon no-border no-padding">
                                    <span class="msg-box n-right" for="c-add-review-email"></span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2 text-right">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>First Name
                            </label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="text" data-rule="required" class="form-control" id="c-add-review-first-name" name="row[reviewer][0][reviewer-first-name]" placeholder="Type here...">
                                <div class="input-group-addon no-border no-padding">
                                    <span class="msg-box n-right" for="c-add-review-first-name"></span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2 text-right">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Last Name
                            </label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="text" data-rule="required" class="form-control" id="c-add-review-last-name" name="row[reviewer][0][reviewer-last-name]" placeholder="Type here...">
                                <div class="input-group-addon no-border no-padding">
                                    <span class="msg-box n-right" for="c-add-review-last-name"></span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2 text-right">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Affiliation
                            </label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="text" data-rule="required" class="form-control" id="c-add-review-affiliation" name="row[reviewer][0][reviewer-affiliation]" placeholder="Type here...">
                                <div class="input-group-addon no-border no-padding">
                                    <span class="msg-box n-right" for="c-add-review-affiliation"></span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2 text-right">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Field
                            </label>
                            <div class="col-xs-12 col-sm-10">
                                <input type="text" data-rule="required" class="form-control" id="c-add-review-field" name="row[reviewer][0][reviewer-field]" placeholder="Type here...">
                                <div class="input-group-addon no-border no-padding">
                                    <span class="msg-box n-right" for="c-add-review-field"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class= "modal-footer">
                    <button class="btn btn-default footer-item table-footer-button-type add-reviewer-submit" style="margin-right: 20px">Add</button>
                    <button type="button" class="btn btn-default footer-item" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .pagination {
        margin: 0;
    }

    .pagination a {
        display: inline-block;
        padding: 6px 12px;
        background-color: #fff;
        border: 1px solid #ddd;
    }

    .pagination .active{
        background-color: #007bff;
        color: #fff;
    }

    .pagination .disabled a {
        pointer-events: none;
    }

    .recommended-del {
        color: #007bff;
    }
    .recommended-del a {
        cursor: pointer;
    }
    .recommended-del a:hover {
        text-decoration: underline;
    }

    .modal-footer {
        border-top: none;
        border-top-color: transparent;
    }
</style>