@{
    HideBread = true;
}
<div class="row" style="text-align:center;">
    <img src="~/images/home.png" style="max-width:100%;margin:0 auto;" />
</div>
<br />
<div class="row overlay-wrapper">
    <template v-if="model">
        <div class="col-md-2 col-sm-4 col-xs-6" v-for="item in GetProducts()">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{item.Name}}</h3>
                    <div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{item.DeviceCount}}</span></div>
                </div>
                <a class="card-body" :href="'/Home/Product/?number='+item.Number" style="display:block;text-align:center;">
                    <img :alt="item.Name" :src="item.Image" style="margin:0 auto;width:64px;" />
                </a>
            </div>
        </div>
        <div class="col-md-12" v-if="model.Scenes.length">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">全局场景</h3>
                    <div class="card-tools"><span data-toggle="tooltip" class="badge bg-green">{{model.Scenes.length}}</span></div>
                </div>
                <div class="card-body">
                    <button class="btn btn-success" v-for="scene in GetScenes()" v-on:click="CallScene(scene.Id)">{{scene.Name}}</button>
                </div>
            </div>
        </div>
    </template>
</div>
@section styles{
    <style>
        .card-body button.btn {
            margin-right: 5px;
        }
    </style>
}
@section scripts{
    <script src="/js/page.js"></script>
    <script src="/js/index.js"></script>
}