{% extends "../main.html" %}
{% block title %}编辑网站{% end %}
{% block content %}
<style>
    .search, #toolbar button, #toolbar-f-permission button, #toolbar-d-permission button,
    #toolbar-uper-permission button {
        margin-bottom: 10px;
    }

    .search input {
        font-size: 12px;
        border-radius: 0;
    }

    #role-table thead tr, #table-member thead tr, #table-permission thead tr, #role-user-table thead tr,
    #role-f-permission-table thead tr, #role-d-permission-table thead tr, #uper-permission-table thead tr,
    #fper-permission-table thead tr, #dper-permission-table thead tr {
        background: whitesmoke;
    }

    #role-table tbody tr, #table-member tbody tr, #table-permission tbody tr, #role-user-table tbody tr,
    #role-f-permission-table tbody tr, #role-d-permission-table tbody tr, #uper-permission-table tbody tr,
    #fper-permission-table tbody tr, #dper-permission-table tbody tr {
        border-bottom: 1px solid #f9f9f9;
    }

    #role-table tbody tr td, #table-member tbody tr td, .pagination-detail, .pagination, #role-modal-right, .modal-footer > button,
    .select2-container, #member-modal-right, #permission-modal-right, #table-permission tbody tr, .basic-info, #myTab,
    #role-user-table tbody tr td, #role-f-permission-table tbody tr td, #role-d-permission-table tbody tr td, #role-basic-modal-right,
    #new-role-body input, #new-role-body textarea, #new-role-body select, #permission-data-modal-right, #permission-data-modal-right,
    #add-role-modal-right, #uper-permission-table tbody tr td, #fper-permission-table tbody tr td, #dper-permission-table tbody tr td,
    .input-group-text, #add-permission-modal-right {
        font-size: 12px !important;
        -webkit-font-smoothing: antialiased !important;
    }

    .opertions {
        margin-right: 10px;
    }

    .site-waring .alert-info {
        color: #555;
        background-color: #eaeaea;
        border-color: #eaeaea;
        border-radius: 0;
        font-size: 12px;
        -webkit-font-smoothing: antialiased;
    }

    .site-waring .alert-info b {
        font-weight: 700;
        font-size: 14px;
    }

    .site-waring .alert-info .user-notic {
        margin-top: 10px;
    }

    .site-waring .alert-info .user-message {
        margin-bottom: 10px;
    }

    .page-title {
        width: 100%;
    }

    .headers {
        padding-bottom: 0;
    }

    .contents {
        padding-top: 0;
    }

    #add_member, .add_permission {
        margin-right: 10px;
        font-size: 12px;
        border-radius: 0;
        font-weight: 300;
    }

    #new-role-body {
        width: 600px;
    }

    #add-member-body, #add-roles-body {
        width: 870px;
    }

    #add-permission-body {
        width: 870px;
        overflow: hidden;
    }

    .muted {
        color: #b30202;
    }

    .modal-header {
        border-bottom: 1px solid #f3f3f3;
    }

    .modal-footer {
        border-top: 1px solid #f3f3f3;
        justify-content: left;
    }

    .modal-footer button {
        border-radius: 0;
        float: left;
    }

    .select2-container {
        display: block;
        width: 100% !important;
    }

    .notie-background-success {
        background-color: #57BF57;
    }

    .notie-background-error {
        background-color: #E1715B;
    }

    .notie-background-warning {
        background-color: #D6A14D;
    }

    button.btn.btn-secondary.dropdown-toggle {
        border-radius: 2px;
        font-weight: 100;
        padding: 0px 5px;
    }

    .select-users {
        padding: 5px 5px 1px 10px;
        border-radius: 10px;
        border: 1px solid #a7a7a7;
        cursor: pointer;
    }

    .select-users .closes {
        float: right;
    }

    .cur-select-users, .cur-select-permission {
        display: inline-block;
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cur-select-permission {
        width: 230px !important;
    }

    .select-users-card-body, .select-permission-card-body {
        border: 1px solid #ececec;
        height: 360px;
        overflow-y: auto;
        padding: .7rem 1.25rem .5rem 1.25rem
    }

    #table-member thead tr th, #table-permission thead tr th {
        border: 1px solid rgba(160, 175, 185, 0.15);
    }

    #member-modal-right .search, #permission-modal-right .search, #add-role-modal-right .search {
        width: 100%;
    }

    #add-member-body .pagination-detail, #add-permission-body .pagination-detail {
        display: none;
    }

    .select-users:hover {
        background: white;
        color: black;
    }

    #per-toolbar input, #per-toolbar span {
        border-radius: 0;
        font-size: 12px !important;
    }

    #per-toolbar input {
        width: 598px;
    }

    #per-toolbar .input-group {
        margin-bottom: 10px !important;
    }

    .per-badge {
        margin-left: 10px;
    }

    #add-permission-body .bootstrap-table {
        overflow-y: auto;
        height: 471px;
    }

    .zu {
        width: 15px !important;
        height: 15px !important;
        color: black
    }

    .basic-info {
        margin-top: 1rem;
        margin-bottom: 2.5rem;
    }

    .basic-info .role-base {
        margin-bottom: .7rem;
    }

    .basic-info .role-base h3 {
        font-weight: 700;
    }

    .page-title h2 {
        font-size: 1.5rem;
    }

    .page-title h2 svg {
        cursor: pointer;
        width: 21px;
        height: 21px;
    }

    .permission-manager {
        padding-top: 1rem;
    }

    #add-roles-body .pagination-detail {
        display: none;
    }

    .select-roles-card-body {
        border: 1px solid #ececec;
        height: 364px;
        overflow-y: auto;
        padding: .7rem 1.25rem .5rem 1.25rem;
    }

    .select-roles .closes {
        float: right;
    }

    .select-roles {
        padding: 5px 5px 1px 10px;
        border-radius: 10px;
        border: 1px solid #a7a7a7;
        cursor: pointer;
    }

    .select-roles:hover {
        background: white;
        color: black;
    }

    .cur-select-roles {
        display: inline-block;
        width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .footer button, #uploadfile {
        border-radius: 0;
        width: 4rem;
        border: 1px solid #e8e8e8;
        font-size: 12px;
    }

    #uploadfile {
        width: 100%;
    }

    #base64Img {
        background: #eaedf2 linear-gradient(45deg, #f0f0f0, #eeeeee);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .custom-file-label span {
        display: inline-block;
        overflow: hidden;
        width: 80%;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 100%;
    }

    .logo-card {
        margin-bottom: 0;
        margin-top: 1rem;
        max-height: 100%;
    }

    .custom-file {
        margin-top: .3rem;
    }

    .footer button:last-child {
        background-color: #f3f3f3;
    }

    .info .form-control {
        border-radius: 0;
    }

    /* 唯一 */
    #main, #header {
        background-color: #fff;
    }

    .circle {
        width: 12px;
        height: 12px;
    }

    .headers h2 {
        font-size: 1rem;
    }

    .headers .cdomain {
        font-size: 1rem;
        font-weight: 100;
        margin-left: 8px;
    }

    .headers .badge {
        margin-left: 3px;
        font-weight: 100;
        color: #9c9c9c;
    }

    .form-control:not(.is-valid):not(.is-invalid):focus {
        border-color: #7d7d7d;
        box-shadow: none;
    }

    .info .form-group input, .info .form-group textarea {
        font-size: 12px;
    }

    .site_status {
        position: relative;
        top: 1px;
    }

    .moban-card .sitemodel_templater {
        background-size: cover;
        background-position: center;
    }

    .moban-card h6.card-title {
        max-width: 170px;
        display: inline-block;
        line-height: 2.1;
        font-size: 13px;
        float: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }

    .moban-card .sitemodel_templater_btn, .moban-card .current-templater-btn {
        width: 50px;
        font-size: 12px;
    }

    .moban-card .card-body {
        padding: 1rem .8rem 0 .8rem;
    }

    .site-moban .input-group-text {
        border-radius: 0;
        cursor: pointer;
    }

    .site-moban input {
        border: 0;
    }

    .moban-card, .moban-card .media {
        border-radius: 0;
    }
</style>
<!-- ############ Content START-->
<div id="content" class="flex ">
    <!-- ############ Main START-->
    <div>
        <div class="page-hero page-container " id="page-hero">
            <div class="padding d-flex headers">
                <div class="page-title headers-t">
                    <h2 class="text-md text-highlight">
                        <i onclick="javascript:history.back(-1);" class="zu" data-feather="arrow-left"></i>
                        {{ domain['sitename'] }}
                        <span id="{{ domain['id'] }}" class="cdomain"
                              class="text-sm">{{ domain['domain'] }} </span>
                        <span class="badge badge-light text-sm">域</span>
                    </h2>
                    <hr>
                </div>
            </div>
        </div>
        <div class="page-content page-container" id="page-content">
            <div class="padding contents">
                <div class="basic-info text-dark">
                    <div class="row">
                        <div class="col-md-8">
                            <form method="post" action="/updatesite">
                                {% module xsrf_form_html() %}
                                <input type="hidden" name="id" class="form-control" value="{{ domain['id'] }}">
                                <input type="hidden" name="domain" class="form-control" id="this_domain"
                                       value="{{ domain['domain'] }}">
                                <div class="row role-base">
                                    <div class="col-md-3">
                                        <h3 class="text-sm">网站基础信息</h3>
                                    </div>
                                    <div class="col-md-9">
                                        <div style="float:right;" class="">
                                            <label class="md-switch">
                                                {% if domain['status']==1 %}
                                                <input id="site_statu" value="1" name="status" type="checkbox" checked>
                                                {% else %}
                                                <input id="site_statu" value="0" name="status" type="checkbox">
                                                {% end %}
                                                <i class="green"></i>
                                                <span class="site_status">网站状态</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row info">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> 网站名称</label>
                                            <input autofocus="autofocus" value="{{ domain['sitename'] }}"
                                                   name="sitename"
                                                   type="text" class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> SEO标题</label>
                                            <input value="{{ domain['seo'] }}" name="seo" type="text"
                                                   class="form-control"
                                                   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row info">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> 网站关键词</label>
                                            <input value="{{ domain['sitekeys'] }}" name="sitekeys" type="text"
                                                   class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> 标题分隔符</label>
                                            <input value="{{ domain['sep'] }}" name="sep" type="text"
                                                   class="form-control"
                                                   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row info">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> 标签页URL</label>
                                            <input value="{{ domain['tag_uri'] }}" name="tag_uri" type="text"
                                                   class="form-control" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> 网站模板</label>
                                            <div class="input-group site-moban">
                                                <input type="text" class="form-control" placeholder="请选择网站模板"
                                                       value="{{ domain['templater'] }}" name="templater" readonly
                                                       id="templater">
                                                <div class="input-group-append">
                                                    <span class="input-group-text" data-toggle="modal"
                                                          data-target="#add-permission-modal-right"
                                                          data-toggle-class="modal-open-aside"
                                                          id="basic-addon2">修改</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row info">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> 联系电话</label>
                                            <input value="{{ domain['tel'] }}" name="tel" type="text"
                                                   class="form-control"
                                                   required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> 联系邮箱</label>
                                            <input value="{{ domain['mail'] }}" name="mail" type="text"
                                                   class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row info">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> 网站标题</label>
                                            <input value="{{ domain['sitetitle'] }}" name="sitetitle" type="text"
                                                   class="form-control"
                                                   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row info">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="text-dark"><span class="muted">*</span> 网站描述</label>
                                            <textarea name="sitedesc" class="form-control" rows="6" data-minwords="6"
                                                      placeholder="{{ domain['sitedesc'] }}">{{ domain['sitedesc'] }}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row info">
                                    <div class="col-md-4">
                                        <div class="form-group footer">
                                            <button type="submit" class="btn btn-primary">保存</button>
                                            <button onclick="javascript:history.back(-1);" type="button"
                                                    class="btn btn-white">返回
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-4 site-waring">
                            <div class="alert alert-info" role="alert">
                                <div class="user-message">
                                    配置网站基本信息
                                </div>
                                <b>注意事项：</b>
                                <div class="user-notic">
                                    1. URI即显示在网页上的URL。</br>
                                    2. 标签页URI更改后需要更新缓存以让原来的页面生效。</br>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-12">
                                    <h3 class="text-sm">网站Logo</h3>
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="customFile">
                                        <label class="custom-file-label" for="customFile"><span>选择文件</span></label>
                                    </div>
                                    <div class="card logo-card">
                                        <div class="media media-2x1 gd-primary">
                                            <a id="base64Img" class="media-content"
                                               style='background-image:url("data:image/png;base64,{{ pic_data }}")'>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-light" id="uploadfile" style="">上传logo</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ############ Main END-->
        </div>
        <!-- ############ Content END-->


        <!-- .选择网站模板modal -->
        <form id="select-templater-form-modal" onsubmit="return false">
            <div id="add-permission-modal-right" class="modal fade" data-backdrop="true">
                <div class="modal-dialog modal-right">
                    <div class="modal-content h-100 no-radius">
                        <div class="modal-header ">
                            <div class="modal-title text-md">选择网站模板</div>
                            <button class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="alert alert-info" role="alert">
                            <i class="mb-1" data-feather="external-link"></i>
                            <span class="mx-2 font-weight-500">前往 <a href="#">模板市场</a> 挑选更多模板！</span>
                        </div>
                        <div id="add-permission-body" class="modal-body">
                            <div class="row row-sm">
                                {% for sitemodel in sitemodel_list %}
                                <div class="col-sm-4" data-id="{{ sitemodel['templater'] }}">
                                    <div class="card moban-card">
                                        <div class="media media-2x1">
                                            <a class="media-content sitemodel_templater"
                                               style="background-image:url('data:image/png;base64,{{ sitemodel['thumbnail_data'] }}')">
                                                <strong class="text-fade"></strong>
                                            </a>
                                        </div>
                                        <div class="card-body">
                                            <h6 class="card-title text-dark">{{ sitemodel['name'] }}</h6>
                                            <span style="float: right;">
                                                {% if str(sitemodel['templater']) == str(domain['templater']) %}
                                                <button disabled class="btn btn-sm w-xs btn-dark current-templater-btn">当前</button>
                                                {% else %}
                                                <button class="btn btn-primary btn-sm w-xs btn-raised sitemodel_templater_btn">使用</button>
                                                {% end %}
                                            </span>
                                            <p class="card-text">
                                                <!--<span style="font-weight:400;" class="badge badge-light text-uppercase ">{{sitemodel['author']}}</span>-->
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                {% end %}
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">确定</button>
                            <button type="button" class="btn btn-light" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>
        </form>

        <!-- / .选择网站模板modal -->

        {% end %}
        {% block js %}
        <script src="/static/libs/notie/dist/notie.min.js"></script>
        <script>

            document.getElementById("customFile").addEventListener("change", function () {
                var filename = document.getElementById('customFile').files[0].name;
                $(".custom-file-label span").text(filename);
            });

            $(document).ready(function () {
                $("#site_statu").change(function () {
                    if ($("#site_statu").prop('checked')) {
                        $("#site_statu").attr("value", "1")
                    } else {
                        $("#site_statu").attr("value", "0")
                    }
                });
            });
            $('#uploadfile').click(function () {
                var fileObj = $("#customFile")[0].files[0];        //获取上传文件名称
                var form = new FormData();//创建表单对象
                var __xsrf = $("[name='_xsrf']").val();
                var domain = $("#this_domain").val();
                form.append("upload_file", fileObj);
                form.append("_xsrf", __xsrf);
                form.append("domain", domain);
                $.ajax({
                    url: '/uploadlogo',
                    data: form,
                    type: 'POST',
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        var objectres = JSON.parse(res);
                        if (objectres['statu'] == 1) {
                            var pic_data = "data:image/png;base64," + objectres['pic_data'];
                            //$("#base64Img").attr("src", pic_data);
                            $("#base64Img").css("background-image", "url(" + pic_data + ")");
                        } else {
                            notie.alert({type: 3, text: '<b>' + objectres['msg'] + '</b>', position: 'top'});
                        }
                    },
                    error: function (res) {
                        notie.alert({type: 3, text: '<b>' + 网络错误 + '</b>', position: 'top'});
                    }
                });
            });
            $(".sitemodel_templater").click(function () {
                var templater = $(this).parent().parent().parent().attr("data-id");
                $("#add-permission-modal-right").modal("hide");
                $("#templater").val(templater);
            });
            $(".sitemodel_templater_btn").click(function () {
                var templater = $(this).parent().parent().parent().parent().attr("data-id");
                $("#add-permission-modal-right").modal("hide");
                $("#templater").val(templater);
            });
        </script>
        {% end %}