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;
    }
    /*.msg-wrap {*/
    /*    width:100px;*/
    /*    !*overflow: hidden;*!*/
    /*}*/
    /*.n-msg {*/
    /*    word-wrap: break-word;*/
    /*    word-break: break-all;*/
    /*    white-space: pre-line;*/
    /*}*/
</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 manuscript</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 information here</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 information</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 here</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 Reviewer
                            <div class="arrow" style="width: 60px">
                                <span class="line"></span>
                            </div>
                        </div>
                        <div class="nav-li-desc">Here you can recommend reviewers</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 editor
                        </div>
                        <div class="nav-li-desc">Confirm your information and submit it to the editor</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="">
                                    Optional 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 ( DOC / PDF )：
                                </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,doc,docx,psd,pdf" 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,doc,docx,psd,pdf" 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">
                                    Other Format：
                                </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-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-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 Permission 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 selectpicker" data-live-search="true" name="row[journal]">
                                        {$channelOptions}
                                    </select>
                                </div>
<!--                                <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" style="margin-bottom: 10px;">
                                <div class="author-content-button-item">
                                    <div class="author-sort-number">
                                        <i class="fa fa-angle-down"></i> <span class="author-sort-number-text">Author 1</span>
                                    </div>
                                    <div class="author-operate-button">
                                        <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>
                                <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><input data-rule="required" id="c-display-e-mail-yes" name="row[author][0][display_email]" type="radio" value="yes" checked="checked" />Yes</label>
                                                <label><input data-rule="required" id="c-display-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>Corresponding Author：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group mb-3">
                                            <div class="radio radio-inline pl-0">
                                                <label><input data-rule="required" id="c-correspondsing-author-yes" name="row[author][0][correspondsing_author]" type="radio" value="yes" checked="checked" />Yes</label>
                                                <label><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}" {in name="key" value="$user.country"}selected{/in}>{$vo}</option>
                                            {/foreach}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            {else}
                            {foreach name="row.author_content" item="author"}
                            <div class="add-author-item" style="margin-bottom: 10px;">
                                <div class="author-content-button-item">
                                    <div class="author-sort-number">
                                        <i class="fa fa-angle-down"></i> <span class="author-sort-number-text">Author {$key + 1}</span>
                                    </div>
                                    <div class="author-operate-button">
                                        <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>
                                <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">
                                                <input data-rule="required" id="c-display-e-mail-yes" name="row[author][{$key}][display_email]" type="radio" value="yes" {if condition="$author.display_email == 'yes'"}checked="checked"{/if} />Yes
                                                <input data-rule="required" id="c-display-e-mail-no" name="row[author][{$key}][display_email]" type="radio" value="no" {if condition="$author.display_email == 'no'"}checked="checked"{/if} />No
                                            </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>Corresponding Author：
                                    </label>
                                    <div class="col-xs-12 col-sm-8">
                                        <div class="input-group mb-3">
                                            <div class="radio radio-inline pl-0">
                                                <input data-rule="required" id="c-correspondsing-author-yes" name="row[author][{$key}][correspondsing_author]" type="radio" value="yes" {if condition="$author.correspondsing_author == 'yes'"}checked="checked"{/if} />Yes
                                                <input data-rule="required" id="c-correspondsing-author-no" name="row[author][{$key}][correspondsing_author]" type="radio" value="no" {if condition="$author.correspondsing_author == 'no'"}checked="checked"{/if} />No
                                            </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 style="display: none" id="box2"></div>

                        <!-- 陈述 -->
                        <div class="form-item statement-content" style="display: none">
                            {include file="user/common/fields"}
                        </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">Proceed 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>