@model MemberPublishPhotoModel
@{
    var isPjax = Context.Request.Headers.ContainsKey("X-PJAX") || Context.Request.Query.ContainsKey("_pjax");
    Layout = isPjax ? null : "_LayoutMember";
    ViewData["Title"] = "上传照片";
    ViewData["ActiveMenu"] = "photos";
    ViewData["Breadcrumb"] = "上传照片";
}

<div class="page-header">
    <h2><i class="fa fa-image"></i> 上传照片</h2>
    <a asp-action="Photos" asp-controller="Member" class="btn btn-secondary">
        <i class="fa fa-arrow-left"></i> 返回列表
    </a>
</div>

<div class="publish-form">
    <input type="hidden" value="@Model.Photo?.Id" id="photoId"/>
    <input type="hidden" value="/my/photos/publish" id="submitAddress"/>
    <div class="form-group">
        <label>选择照片 @(Model.Photo == null ? Html.Raw("<span class=\"required\">*</span>") : null)</label>
        
        <div class="upload-area" id="dropZone">
            <input type="file" class="file-input-hidden" id="photoFile" accept="image/*">
            <div class="upload-icon">
                <i class="fa fa-cloud-upload"></i>
            </div>
            <div class="upload-text">点击或拖拽照片到此处</div>
            <div class="upload-hint">支持 JPG, PNG, GIF, WEBP 等格式</div>
        </div>

        <div class="photo-preview-container @(Model.Photo != null ? "active" : "")" id="previewContainer">
            <div class="preview-image-wrapper">
                @if (Model.Photo != null)
                {
                    <div class="preview-image-loading" id="imageLoadingPlaceholder">
                        <div class="loading-spinner-icon"></div>
                    </div>
                }
                <img src="@(Model.Photo?.AccessUrl)" 
                     alt="照片预览" 
                     class="preview-image" 
                     id="photoPreview"
                     @if (Model.Photo != null) { <text>style="display:none;"</text> }>
            </div>
            <div class="preview-toolbar" id="previewToolbar">
                <button type="button" class="btn-icon" id="viewPhotoBtn" title="查看大图">
                    <i class="fa fa-search-plus"></i>
                </button>
            </div>
            <div class="preview-info">
                <span class="file-name" id="fileName">@(Model.Photo?.AccessUrl ?? "未选择文件")</span>
                <span class="file-size" id="fileSize">
                    @if (@Model.Photo?.Length > 0)
                    {
                        @Model.Photo.Length.FileSize()
                    }
                </span>
                <button type="button" class="remove-file-btn" id="removeFileBtn">
                    <i class="fa fa-trash"></i> 移除
                </button>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>选择标签</label>
        <select class="form-control" id="photoTags" multiple>
             @foreach(var tag in Model.Tags) 
             {
                 if (Model.Photo?.Tags?.Contains(tag) == true) 
                 {
                     <option value="@tag" selected>@tag</option>
                 } else 
                 {
                     <option value="@tag">@tag</option>
                 }
            }
        </select>
    </div>
    <div class="form-group">
        <label>补充标签</label>
        <input type="text" class="form-control" id="photoExtraTags" placeholder="请输入补充标签，用逗号分隔">
    </div>
    <div class="form-group">
        <label>描述</label>
        <textarea class="form-control" id="photoDescription" rows="3" placeholder="请输入照片描述">@Model.Photo?.Description</textarea>
    </div>
    
    <div class="form-actions">
        <button type="button" class="btn btn-primary" id="confirmPublish" data-action="publishPhoto">上传照片</button>
    </div>
</div>