{% extends "layout.html" %}

{% block content %}
<div class="main-content pb55">
    <div class="container-fluid">
        <div class="pos-box bgw mtb15">
            <div class="tab-list" id="cutMode">
                <div class="tabs-item" data-type="overview" style="display: none;">Overview</div>
                <div class="tabs-item" data-type="container">Container</div>
                <div class="tabs-item" data-type="compose">Compose</div>
                <div class="tabs-item" data-type="model">Compose template</div>
                <div class="tabs-item" data-type="image">Image</div>
                <div class="tabs-item" data-type="host" style="display: none;">Host</div>
                <div class="tabs-item" data-type="network">Network</div>
                <div class="tabs-item" data-type="volume">Volume</div>
                <div class="tabs-item" data-type="registry">Repository</div>
                <div class="tabs-item" data-type="setup">Settings</div>
            </div>
        </div>
        <div class="info-title-tips">
            <p><span class="glyphicon glyphicon-alert" style="color: #f39c12; margin-right: 10px;"></span>[Reminder] This function is exclusive to the professional version, it is currently in the testing phase can be used by all users</p>
        </div>
    <div class="dk-container-view bgw mtb15 pd15 tab-view-box">
        <div class="tab-con" style="padding: 0;overflow: inherit;">
            <div class="tab-con-block">
            </div>
            <div class="tab-con-block">
                <div id="dk_container_table"></div>
            </div>
            <div class="tab-con-block">
                <div id="dk_compose_table"></div>
            </div>
            <div class="tab-con-block">
                <div id="dk_model_table"></div>
            </div>
            <div class="tab-con-block">
                <div id="dk_image_table"></div>
            </div>
            <div class="tab-con-block">
                <div id="dk_host_table"></div>
            </div>
            <div class="tab-con-block">
                <div id="dk_network_table"></div>
            </div>
            <div class="tab-con-block">
                <div id="dk_volume_table"></div>
            </div>
            <div class="tab-con-block">
                <div id="dk_registry_table"></div>
            </div>
            <div class="tab-con-block">
                <div class="dk_setup_form" id="dk_setup_form"></div>
            </div>
        </div>
        <div class="mask_layer" style="display: none;"><div class="prompt_description"></div></div>
    </div>
</div>
<style>
		.mask_layer .prompt_description {
			width: 500px;
		}
    .tab-view-box{
        position: relative;
    }
    .add_container .bt-form th,
    .add_container .bt-form td{
        padding: 4px!important;
    }
    .add_container .line-tname,
    .add_container span.minus{
        padding:0 20px
    }
    .add_container span.plus{
        margin-left: 5px;
        font-size: 18px;
        cursor: pointer;
    }
    .add_container span.plus:hover{
        background-color: #20a53a;
        color:#fff
    }
    .add_container .divtable {
        width: 482px;
    }
		.add_container .divtable table td {
			height: 30px;
		}
		#container_box .bt-form .tname,
		.add_project_form .bt-form .tname,
		.add_container .tabpanel:nth-of-type(2) .tname {
			width: 150px;
		}
		
		.dk_setup_form .bt-form .tname,
		.add_registry_form .bt-form .tname {
			width: 170px;
		}
		.dk_setup_form .bt-form .line .info-r {
			margin-left: 170px;
		}
    .cu-pointer{
        cursor: pointer;
    }
    .dk-container-view .size_ellipsis{
        vertical-align: bottom;
    }
    .add_container .unit{
        display: inline-block;
        border: 1px solid #ccc;
        border-left: 0;
        border-radius: 2px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #f6f6f6;
        vertical-align: bottom;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    ul.dk_volumes{
        transition: all 500ms;
        background: #fff;
        position: absolute;
        top: 30px;
        left: 0;
        display: none;
        box-shadow: 0 1px 5px rgb(0 0 0 / 50%);
        border-radius: 1px;
        width: 155px;
        z-index: 999;
        max-height: 200px;
        overflow: auto;
    }
    ul.dk_volumes li {
        height: 28px;
        line-height: 28px;
        padding: 0 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    ul.dk_volumes li.active{
        color: #fff;
        background-color: #20a53a;
    }
    
    ul.dk_volumes li:hover {
        background-color: #f2f2f2;
    }

    
    .dk_status_select{
        border: 1px solid #ccc;
        padding: 0px 2px;
        position: relative;
        background-color: #fff;
    }
    .dk_status_select:after{
        content: "";
        width: 6px;
        height: 6px;
        border-left: 1px solid #666;
        border-bottom: 1px solid #666;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        position: absolute;
        right: 7px;
        top: 5px;
    }
    .dk_status_select a {
        /* color: #333!important; */
        display: block;
    }
    .dk_status_select .glyphicon{
        display: none;
    } 
    ul.dk_status_select_list{
        position: fixed;
        background: #fff;
        border: 1px solid #c9c9c9;
        z-index: 10;
        display: block;
        width: 63px;
        margin-top: 5px;
    }
    ul.dk_status_select_list li{
        height: 24px;
        line-height: 24px;
        padding:0 4px;
        cursor: pointer;
    }
    ul.dk_status_select_list li:hover{
        background-color: #20a53a;
        color: #fff;
    }

    /* json树 */
    ul.jsontree_tree{
        margin-left:0
    }
    .jsontree_value_string{
        word-break: break-all;
    }
    /* json树 end*/


    /* 容器监控样式 */
    .cont-chart-dialog{
        font-size: 0;
    }
    
    .cont_chart_block {
        display: inline-block;
        width: 49.5%;
    }
    .cont_chart_line,
    .cont_chart_block {
        border-radius: 4px;
        border: 1px solid #EBEEF5;
        font-size: 12px;
        margin-bottom: 10px;
    }
    .cont_chart_block:nth-child(2n-1){
        margin-left: 10px;
    }
    .cont_chart_child_title{
        border-bottom: 1px solid #EBEEF5;
        padding: 10px;
    }
    .cont_chart_basis {
        display: inline-block;
        padding: 15px;
        font-size: 13px;
    }
    .cont_chart_basis span {
        color: #919191;
    }
    .bt-ico-ask a{
        color: #fb7d00;
    }
    .bt-ico-ask:hover a,
    .bt-ico-ask a:hover{
        color:#fff
    }
    /* 容器监控样式 end */

    /* 添加Yaml模板 */
    .model_sc_top{
        position: relative;
    }
    .model_sc_child {
        display: inline-block;
        position: absolute;
        right: 110px;
        top: 6px;
    }
    .model_sc_child::after {
        content: 'Include subdir';
        margin-left: 5px;
    }
    /* 添加Yaml模板 end */
</style>
<script type="text/template" id="aceTmplate">
	<div id="ace_conter">
			<div class="ace_header" style="top: 0">
					<span class="saveFile"><i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i><span>Save</span></span>
					<span class="saveFileAll"><i class="glyphicon glyphicon-duplicate" aria-hidden="true"></i><span>Save All</span></span>
					<span class="refreshs"><i class="glyphicon glyphicon-refresh" aria-hidden="true"></i><span>Refresh</span></span>
					<span class="searchs"><i class="glyphicon glyphicon-search" aria-hidden="true"></i><span>Search</span></span>
					<span class="replaces"><i class="glyphicon glyphicon-retweet" aria-hidden="true"></i><span>Replace</span></span>
					<span class="jumpLine"><i class="glyphicon glyphicon-pushpin" aria-hidden="true"></i><span>JumpLine</span></span>
					<span class="fontSize"><i class="glyphicon glyphicon-text-width" aria-hidden="true"></i><span>Font</span></span>
					<span class="themes"><i class="glyphicon glyphicon-magnet" aria-hidden="true"></i><span>Theme</span></span>
					<span class="setUp"><i class="glyphicon glyphicon-cog" aria-hidden="true"></i><span>Set</span></span>
					<span class="helps"><i class="glyphicon glyphicon-question-sign" aria-hidden="true"></i><span>Help</span></span>
					<div class="pull-down" title="Hide toolbar" style="top: 0"><i class="glyphicon glyphicon-menu-down" aria-hidden="true"></i></div>
			</div>
			<div class="ace_overall" style="top: 35px;">
					<!-- 编辑器目录 -->
					<div class="ace_catalogue" style="left:0px">
							<div class="ace_catalogue_title">Directory<div class="dir-menu-right"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></div></div>
						<div class="ace_dir_tools">
							<div class="upper_level"  title="Return to parent directory">
								<i class="glyphicon glyphicon-share-alt" aria-hidden="true"></i>
								<span>Back</span>
							</div>
							<div class="search_file" title="Search File">
								<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
								<span>Search</span>
							</div>
							<div class="new_folder" title="File/Folder">
								<i class="glyphicon glyphicon-plus"  aria-hidden="true"></i>
								<span>New</span>
								<ul class="folder_down_up">
									<li data-type="2"><i class="folder-icon"></i>Folder</li>
											<li data-type="3"><i class="text-icon"></i>File</li>
								</ul>
							</div>
							<div class="refresh_dir" title="Refresh list">
								<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
								<span>Refresh</span>
							</div>
							<span class="ace_editor_main_storey"></span>
						</div>

							<div class="ace_catalogue_list">
									<ul class="cd-accordion-menu"></ul>
									<ul class="ace_catalogue_menu">
										<li data-type="0"><i class="glyphicon glyphicon-refresh" aria-hidden="true"></i><span>Refresh</span></li>
										<li data-type="1"><i class="glyphicon glyphicon-folder-open" aria-hidden="true"></i><span>Subdirectory</span></li>
										<li data-type="2"><i class="folder-icon"></i><span>New Folder</span></li>
										<li data-type="3"><i class="text-icon"></i><span>New File</span></li>
										<li data-type="4"><i class="rename-icon img-icon"></i><span>Rename</span></li>
										<li data-type="5"><i class="down-icon img-icon"></i><span>Download</span></li>
										<li data-type="6"><i class="del-icon img-icon"></i><span>Delete</span></li>
								</ul>
							</div>
							<div class="ace_catalogue_drag_icon">
									<div class="drag_icon_conter"></div>
									<span class="fold_icon_conter" title="Hide file directory"></span>
							</div>

					</div>
					<!-- 编辑内容 -->
					<div class="ace_editor_main">
							<ul class="ace_conter_menu"></ul>
							<div class="ace_conter_tips"><div class="tips"></div></div>
							<div class="ace_editor_main_storey"></div>
							<div class="ace_conter_editor"></div>
							<div class="ace_conter_toolbar">
									<div class="pull-left size_ellipsis">
											<span data-type="path" class="size_ellipsis"></span>
									</div>
									<div class="pull-right">
											<span data-type="cursor"></span>
											<span data-type="history"></span>
											<span data-type="tab"></span>
											<span data-type="encoding"></span>
											<span data-type="lang"></span>
									</div>
							</div>
					</div>
					<div class="ace_toolbar_menu" style="display: none;">
							<div class="menu-item menu-tabs" style="display: none;">
									<div class="menu-title">Set tabs</div>
									<ul class="tabsType">
											<li data-value="nbsp">Indent using spaces</li>
											<li data-value="tabs">Indent using "Tab"</li>
									</ul>
									<div class="menu-title" style="margin-top:15px">Set the tab length</div>
									<ul class="tabsSize">
											<li data-value="1">1</li>
											<li data-value="2">2</li>
											<li data-value="3">3</li>
											<li data-value="4">4</li>
											<li data-value="5">5</li>
											<li data-value="6">6</li>
									</ul>
							</div>
							<div class="menu-item menu-encoding" style="display: none;">
									<div class="menu-title">Set file save encoding format</div>
									<ul></ul>
							</div>
							<div class="menu-item menu-files" style="display: none;">
									<div class="menu-conter">
										<input type="text" class="menu-input" placeholder="Input language mode">
										<i class="fa fa-close" aria-hidden="true"></i>
									</div>
									<div class="menu-title">Set file language association</div>
									<ul></ul>
							</div>
							<div class="menu-item menu-fontSize" style="display: none;">
									<div class="menu-title">Set editor font size</div>
									<div class="menu-conter">
											<div class="set_font_size">
													<input type="number" min="12" max="45"/>
													<span class="tips error">Font setting range 12-45</span>
													<button class="btn-save">Save</button>
											</div>
									</div>
							</div>
							<div class="menu-item menu-jumpLine" style="display: none;">
									<div class="menu-title">Jump to specified line</div>
									<div class="menu-conter">
											<div class="set_jump_line">
													<input type="number" min="0"/>
													<button class="btn-save">Jump</button>
											</div>
									</div>
							</div>
							<div class="menu-item menu-themes" style="display: none;">
									<div class="menu-title">Set editor theme</div>
									<ul></ul>
							</div>
							<div class="menu-item menu-history" style="display: none;">
									<div class="menu-title">History version</div>
									<ul></ul>
							</div>
							<div class="menu-item menu-setUp"  style="display: none;">
								<div class="menu-title">Editor setting [ Some settings need to be restart editor ]</div>
								<ul class="editor_menu">
									<li data-type="wrap">Auto wrap</li>
									<li data-type="enableLiveAutocompletion">Code autocomplete</li>
									<li data-type="enableSnippets">Enable snippets</li>
									<li data-type="showInvisibles">Show hidden characters</li>
											<li data-type="showLineNumbers">Show line numbers</li>

									</ul>
							</div>
					</div>
			</div>
	</div>
</script>
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="{{g.cdn_url}}/js/docker.js?version={{g['version']}}&repair={{data['js_random']}}"></script>
<script type="text/javascript" src="{{g.cdn_url}}/jsonTree/jsonTree.js"></script>

<script type="text/javascript" src="{{g.cdn_url}}/js/jquery.dragsort-0.5.2.min.js" defer></script>
<script type="text/javascript" src="{{g.cdn_url}}/ace/ace.js" defer></script>
<script type="text/javascript" src="{{g.cdn_url}}/ace/ext-language_tools.js" defer></script>
<script type="text/javascript" src="{{g.cdn_url}}/js/xterm.js" defer></script>
<link rel="stylesheet" href="{{g.cdn_url}}/jsonTree/jsonTree.css" />
{% endblock %}