@using Dpz.Core.Service.RepositoryService
@model VmBookmark
@inject IBookmarkService BookmarkService

<div class="layui-collapse" lay-accordion>
    <div class="layui-colla-item create-form">
        <h2 class="layui-colla-title">添加书签</h2>
        <div class="layui-colla-content">
            <form class="bookmark-create layui-form" asp-action="Create">
                <div class="layui-form-item">
                    <label asp-for="Title" class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input asp-for="Title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label asp-for="Url" class="layui-form-label">书签地址</label>
                    <div class="layui-input-block">
                        <input asp-for="Url" required lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label asp-for="Icon" class="layui-form-label">图标</label>
                    <div class="layui-input-block">
                        <input asp-for="Icon" placeholder="请输入图标地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label asp-for="Image" class="layui-form-label">图片</label>
                    <div class="layui-input-block">
                        <input asp-for="Image" placeholder="请输入图片地址" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label asp-for="Categories" class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                        @foreach (var item in await BookmarkService.GetCategoriesAsync())
                        {
                            <input type="checkbox" name="Categories" title="@item" value="@item">
                        }
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">补充分类</label>
                    <div class="layui-input-block">
                        <input type="text" name="category"  placeholder="补充分类;分隔" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit>立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>