@page
@model Yes.Blog.Areas.Admin.Pages.Theme.IndexModel
@{
}



<template x-data x-if="$store.errorMessage">
    <div class="alert alert-danger" x-show="$store.errorMessage" x-transition x-text="$store.errorMessage"></div>
</template>


<div class="header">
    <h1 class="page-title">
        模板设置
        @*<a class="btn btn-default  btn-xs" asp-page="./Import">
            <i class="fa fa-plus"></i> 导入模板
        </a>*@
    </h1>
    <ul class="breadcrumb">
        <li>
            <a asp-page="/Index">管理中心</a>
        </li>
        <li class="active">模板设置</li>
    </ul>

</div>

<div class="main-content" x-data="data">

    <div class="row">
        <div class="col-xs-12 col-md-12 col-lg-12 theme-box">
            <template x-for="(item,index) in items" :key="index">
                <div class="panel panel-default">
                    <div :class="item.isInUse ? 'panel-body bg-success' : 'panel-body'">
                        <img :src="`/themes/${item.dirName}/screenshot.png`" :alt="item.name" class="panel-image">
                        <div class="panel-content">
                            <h3 x-text="item.name"></h3>
                            <p>版本：<span x-text="item.version"></span></p>
                            <p>作者：<span x-text="item.author"></span></p>
                            <p>简介：<span x-text="item.description"></span></p>
                            <p>主页：<span x-text="item.homepage"></span></p>
                            <a class="activate" href="javascript:;" x-show="!item.isInUse" x-on:click="showModal = true;this.theme=item.dirName;">切换到该主题</a>
                        </div>
                    </div>
                </div>
            </template>

        </div>
    </div>


    <div x-show.transition.opacity="showModal" class="modal fade in" id="myModal" tabindex="-1" x-cloak>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button x-on:click="showModal = false" type="button" class="close" data-dismiss="modal">×</button>
                    <h3 id="myModalLabel">删除操作确认</h3>
                </div>
                <div class="modal-body">
                    <p class="error-text">
                        <i class="fa fa-warning modal-icon"></i>确认要切换到该主题吗?
                        <br>操作后不可恢复.
                    </p>
                </div>
                <div class="modal-footer">
                    <button x-on:click="showModal = false" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button x-on:click="showModal = false; confirmAction()" class="btn btn-danger" data-dismiss="modal">确认</button>
                </div>
            </div>
        </div>
    </div>


    <partial name="_Footer" />
</div>



@section Scripts {
    <script src="~/admin/js/theme/index.js" asp-append-version="true"></script>
}