{extends file=$smarty.current_dir|cat:'/../extends.tpl'}
{use class="yii\helpers\Url"}
{use class="yii\grid\GridView"}
{use class="app\assets\ConfigAsset"} 
{ConfigAsset::register($this)|void}
{block name='content'}
    <style>
        .input-group-addon{
            width: 100px;
            font-weight: bold;
        }
        .input-group{
            width: 100%;
        }
        #fontSizeWrapper { font-size: 16px; }

        #fontSize {
            width: 100px;
            font-size: 1em;
        }

        /* ————————————————————–
          Tree core styles
        */
        .tree { margin: 1em; list-style: none;}

        .tree input {
            position: absolute;
            clip: rect(0, 0, 0, 0);
        }

        .tree input ~ ul { display: none; }

        .tree input:checked ~ ul { display: block; }

        /* ————————————————————–
          Tree rows
        */
        .tree li {
            line-height: 1.2;
            position: relative;
            padding: 0 0 1em 1em;
        }

        .tree ul li { padding: 1em 0 0 1em; }

        .tree > li:last-child { padding-bottom: 0; }

        /* ————————————————————–
          Tree labels
        */
        .tree_label {
            position: relative;
            display: inline-block;
            background: #fff;
        }

        label.tree_label { cursor: pointer; }

        label.tree_label:hover { color: #666; }

        /* ————————————————————–
          Tree expanded icon
        */
        label.tree_label:before {
            background: #000;
            color: #fff;
            position: relative;
            z-index: 1;
            float: left;
            margin: 0 1em 0 -2em;
            width: 1em;
            height: 1em;
            border-radius: 1em;
            content: '+';
            text-align: center;
            line-height: .9em;
        }

        :checked ~ label.tree_label:before { content: '–'; }

        /* ————————————————————–
          Tree branches
        */
        .tree ul{
            list-style: none;
        }
        .tree li:before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -.5em;
            display: block;
            width: 0;
            border-left: 1px solid #777;
            content: "";
        }

        .tree_label:after {
            position: absolute;
            top: 0;
            left: -1.5em;
            display: block;
            height: 0.5em;
            width: 1em;
            border-bottom: 1px solid #777;
            border-left: 1px solid #777;
            border-radius: 0 0 0 .3em;
            content: '';
        }

        label.tree_label:after { border-bottom: 0; }

        :checked ~ label.tree_label:after {
            border-radius: 0 .3em 0 0;
            border-top: 1px solid #777;
            border-right: 1px solid #777;
            border-bottom: 0;
            border-left: 0;
            bottom: 0;
            top: 0.5em;
            height: auto;
        }

        .tree li:last-child:before {
            height: 1em;
            bottom: auto;
        }

        .tree > li:last-child:before { display: none; }

        .tree_custom {
            display: block;
            background: #eee;
            padding: 1em;
            border-radius: 0.3em;
        }
        .editform{
            display: inline-block;min-width: 200px;
        }
    </style>
    <div class="container-fluid">
        <br>
        <div class="row">
            <div class="col-md-8">
                <div class="mt-element-step">
                    <div class="row step-thin">
                        <div class="col-md-4 bg-grey mt-step-col">
                            <div class="mt-step-number bg-white font-grey">1</div>
                            <div class="mt-step-title uppercase font-grey-cascade" style="cursor: pointer;" onclick="window.location = '{Url::to(['/config/cau-hinh-thiet-bi'])}';">
                                Cấu hình thiết bị
                            </div>
                            <div class="mt-step-content font-grey-cascade">Device config</div>
                        </div>
                        <div class="col-md-4 bg-grey mt-step-col">
                            <div class="mt-step-number bg-white font-grey">2</div>
                            <div class="mt-step-title uppercase font-grey-cascade" style="cursor: pointer;" onclick="window.location = '{Url::to(['/config'])}';">
                                Cấu hình máy chủ
                            </div>
                            <div class="mt-step-content font-grey-cascade">Server config</div>
                        </div>
                        <div class="col-md-4 bg-grey mt-step-col active">
                            <div class="mt-step-number bg-white font-grey">3</div> 
                            <div class="mt-step-title uppercase font-grey-cascade" style="cursor: pointer;" onclick="window.location = '{Url::to(['/config/cau-hinh-nhan-dien'])}';">
                                Cấu hình nhận diện
                            </div>
                            <div class="mt-step-content font-grey-cascade">Engine config</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-6 col-md-push-1">
                {$config_json}
                <button style="position: fixed;left: 0;top: 170px;" class="btn btn-primary" onclick="saveStep2(this);" data-href="{Url::to(['/config/cau-hinh-nhan-dien'])}">
                    <i class="fa fa-floppy-o"></i> Lưu lại
                </button>
            </div>
        </div>
    </div>
{/block}