{template "install/header.html"}

<style>
    .install-check-form .form-group {
        margin: 0;
    }

    .install-check-form .control-label {
        color: #334155;
        font-weight: 600;
    }

    .install-check-form .form-control-static {
        color: #4a5568;
    }

    .install-check-box {
        margin-top: -1px;
        padding: 8px 0;
    }

    .install-check-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .install-check-item {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 10px;
        padding: 12px 14px;
        border: 1px solid #e7edf4;
        border-radius: 10px;
        background: #f8fbfd;
        color: #475569;
        line-height: 1.7;
    }

    .install-check-item:last-child {
        margin-bottom: 0;
    }

    .install-check-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 74px;
        padding: 2px 10px;
        border-radius: 999px;
        background: #eaf7ef;
        color: #1f8a4c;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    .install-check-item.is-error {
        border-color: #f3d0d0;
        background: #fff6f6;
        color: #7f1d1d;
    }

    .install-check-item.is-error .install-check-status {
        background: #fdeaea;
        color: #d83a3a;
    }

    .install-check-help {
        margin-left: auto;
        color: #1a73b8;
        text-decoration: none;
        white-space: nowrap;
    }

    .install-check-help:hover,
    .install-check-help:focus {
        color: #0f5f9b;
        text-decoration: underline;
    }

    .install-action-disabled {
        min-width: 200px;
        border-radius: 22px;
        color: #7b8794;
        background: #eef2f6;
        border-color: #dde5ed;
    }

    .install-action-disabled:hover,
    .install-action-disabled:focus,
    .install-action-disabled:active {
        color: #7b8794;
        background: #eef2f6;
        border-color: #dde5ed;
    }

    @media (max-width: 767px) {
        .install-check-item {
            flex-wrap: wrap;
            gap: 8px;
        }

        .install-check-help {
            margin-left: 0;
        }
    }
</style>

<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-refresh font-green"></i>
            <span class="caption-subject font-green">{dr_lang('环境监测')}</span>
        </div>
    </div>
    <div class="portlet-body ">
        <form action="#" class="form-horizontal form-bordered install-check-form">
            <div class="form-body">
                <div class="form-group">
                    <label class="control-label col-md-3">{dr_lang('PHP版本')}</label>
                    <div class="col-md-9">
                        <p class="form-control-static"> {PHP_VERSION} </p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">{dr_lang('PHP版本要求')}</label>
                    <div class="col-md-9">
                        <p class="form-control-static"> {FRAME_PHP_VERSION}{dr_lang('及以上版本')} </p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">{dr_lang('MySQL版本要求')}</label>
                    <div class="col-md-9">
                        <p class="form-control-static"> {dr_lang('5.6及以上版本')} </p>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">{dr_lang('目录读写权限')}</label>
                    <div class="col-md-9 install-check-box">
                        <div class="install-check-list">
                        {loop $path $name $code}
                        <p class="install-check-item {if !$code}is-error{/if}">
                            <span class="install-check-status">{if !$code}{dr_lang('错误')}{else}{dr_lang('正确')}{/if}</span>
                            <span>{$name}</span>
                        </p>
                        {/loop}
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">{dr_lang('PHP环境检测')}</label>
                    <div class="col-md-9 install-check-box">
                        <div class="install-check-list">
                        {loop $php $t}
                        {if !$t.code}
                        <p class="install-check-item is-error">
                            <?php $error = 1;?>
                            <span class="install-check-status">{dr_lang('不支持')}</span>
                            <span>{$t.name}</span>
                            <a href="{$t.help}" target="_blank" class="install-check-help">{dr_lang('查看帮助')}</a>
                        </p>
                        {else}
                        <p class="install-check-item">
                            <span class="install-check-status">{dr_lang('支持')}</span>
                            <span>{$t.name}</span>
                        </p>
                        {/if}
                        {/loop}
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <div class="portlet-title" style="min-height: 18px;">
    </div>
    <div class="portlet-body text-center">
        {if $error}
        <button type="button" class="btn default install-action-disabled"> {dr_lang('无法进行下一步安装')} </button>
        {else}
        <a href="{$next_url}" class="btn btn-success"> {dr_lang('下一步安装')} </a>
        {/if}
    </div>
</div>

{template "install/footer.html"}