@page
@model Admin.Pages.Config.Basic.ImagesModel
@{
    ViewData["Title"] = "À̹ÌÁö ¼³Á¤";
}

<div class="container">
    <h3>@ViewData["Title"]</h3>
    <hr />
    <partial name="_navTabs" />

    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <partial name="_StatusMessage" />

    <form name="f_admin_write" id="fAdminWrite" class="mt-2" method="post" autocomplete="off" accept-charset="UTF-8" enctype="multipart/form-data">

        <!-- Favicon -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.FaviconFile" class="col-sm-2 col-form-label">Favicon</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.FaviconPath))
                {
                    <input asp-for="Input.Images.FaviconFile" class="form-control" accept=".ico,image/x-icon" />
                    <span asp-validation-for="Input.Images.FaviconFile" class="text-danger"></span>
                    <div class="form-text text-muted">ºê¶ó¿ìÀú ÅÇ/Áñ°Üã±â¿¡ Ç¥½ÃµË´Ï´Ù. ±ÇÀå: .ico, 32x32 ¶Ç´Â 48x48</div>
                }
                else
                {
                    <img src="@Model.Input.Images.FaviconPath" alt="favicon" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_favicon" id="deleteFavicon" />
                        <label class="form-check-label" for="deleteFavicon">»èÁ¦</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- Logo Square -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.LogoSquareFile" class="col-sm-2 col-form-label">Logo-square</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.LogoSquarePath))
                {
                    <input asp-for="Input.Images.LogoSquareFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml" />
                    <span asp-validation-for="Input.Images.LogoSquareFile" class="text-danger"></span>
                    <div class="form-text text-muted">Á¤»ç°¢Çü ·Î°í(ÇÁ·ÎÇÊ/¾ÆÀÌÄÜ ¿µ¿ª)¿¡ »ç¿ëµË´Ï´Ù. ±ÇÀå: 512x512 PNG Åõ¸í ¹è°æ</div>
                }
                else
                {
                    <img src="@Model.Input.Images.LogoSquarePath" alt="logo-square" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_logo_square" id="deleteLogoSquare" />
                        <label class="form-check-label" for="deleteLogoSquare">»èÁ¦</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- Logo Horizontal -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.LogoHorizontalFile" class="col-sm-2 col-form-label">Logo-horizontal</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.LogoHorizontalPath))
                {
                    <input asp-for="Input.Images.LogoHorizontalFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml" />
                    <span asp-validation-for="Input.Images.LogoHorizontalFile" class="text-danger"></span>
                    <div class="form-text text-muted">Çì´õ/»ó´Ü ¿µ¿ª¿¡ »ç¿ëµÇ´Â °¡·ÎÇü ·Î°íÀÔ´Ï´Ù. ±ÇÀå: °¡·Î 200~400px ÀÌ»ó</div>
                }
                else
                {
                    <img src="@Model.Input.Images.LogoHorizontalPath" alt="logo-horizontal" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_logo_horizontal" id="deleteLogoHorizontal" />
                        <label class="form-check-label" for="deleteLogoHorizontal">»èÁ¦</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- OG Default -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.OgDefaultFile" class="col-sm-2 col-form-label">og-default</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.OgDefaultPath))
                {
                    <input asp-for="Input.Images.OgDefaultFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.OgDefaultFile" class="text-danger"></span>
                    <div class="form-text text-muted">SNS °øÀ¯(Open Graph) ±âº» À̹ÌÁöÀÔ´Ï´Ù. ±ÇÀå: 1200x630</div>
                }
                else
                {
                    <img src="@Model.Input.Images.OgDefaultPath" alt="og-default" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_og_default" id="deleteOgDefault" />
                        <label class="form-check-label" for="deleteOgDefault">»èÁ¦</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- Twitter Image -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.TwitterImageFile" class="col-sm-2 col-form-label">Twitter-image</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.TwitterImagePath))
                {
                    <input asp-for="Input.Images.TwitterImageFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.TwitterImageFile" class="text-danger"></span>
                    <div class="form-text text-muted">Æ®À§ÅÍ Ä«µå °øÀ¯ À̹ÌÁöÀÔ´Ï´Ù. ±ÇÀå: 1200x600 ¶Ç´Â 1200x628</div>
                }
                else
                {
                    <img src="@Model.Input.Images.TwitterImagePath" alt="twitter-image" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_twitter_image" id="deleteTwitterImage" />
                        <label class="form-check-label" for="deleteTwitterImage">»èÁ¦</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- Apple Touch Icon -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.AppleTouchIconFile" class="col-sm-2 col-form-label">Apple-touch-icon</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.AppleTouchIconPath))
                {
                    <input asp-for="Input.Images.AppleTouchIconFile" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.AppleTouchIconFile" class="text-danger"></span>
                    <div class="form-text text-muted">iOS Ȩ È­¸é¿¡ Ãß°¡ ½Ã ¾ÆÀÌÄÜÀ¸·Î »ç¿ëµË´Ï´Ù. ±ÇÀå: 180x180 PNG</div>
                }
                else
                {
                    <img src="@Model.Input.Images.AppleTouchIconPath" alt="apple-touch-icon" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_apple_touch_icon" id="deleteAppleTouchIcon" />
                        <label class="form-check-label" for="deleteAppleTouchIcon">»èÁ¦</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- App Icon 192 -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.AppIcon192File" class="col-sm-2 col-form-label">App-icon-192</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.AppIcon192Path))
                {
                    <input asp-for="Input.Images.AppIcon192File" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.AppIcon192File" class="text-danger"></span>
                    <div class="form-text text-muted">PWA/¾Û ¾ÆÀÌÄÜ(192)À¸·Î »ç¿ëµË´Ï´Ù. ±ÇÀå: 192x192 PNG</div>
                }
                else
                {
                    <img src="@Model.Input.Images.AppIcon192Path" alt="app-icon-192" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_app_icon_192" id="deleteAppIcon192" />
                        <label class="form-check-label" for="deleteAppIcon192">»èÁ¦</label>
                    </div>
                }
            </div>
        </div>

        <hr />

        <!-- App Icon 512 -->
        <div class="row mb-2 align-items-center">
            <label asp-for="Input.Images.AppIcon512File" class="col-sm-2 col-form-label">App-icon-512</label>
            <div class="col-sm-10">
                @if (string.IsNullOrEmpty(Model.Input.Images.AppIcon512Path))
                {
                    <input asp-for="Input.Images.AppIcon512File" class="form-control" accept="image/png,image/jpeg,image/gif,image/webp" />
                    <span asp-validation-for="Input.Images.AppIcon512File" class="text-danger"></span>
                    <div class="form-text text-muted">PWA/¾Û ¾ÆÀÌÄÜ(512)À¸·Î »ç¿ëµË´Ï´Ù. ±ÇÀå: 512x512 PNG</div>
                }
                else
                {
                    <img src="@Model.Input.Images.AppIcon512Path" alt="app-icon-512" class="img-fluid rounded" />
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" value="1" name="delete_app_icon_512" id="deleteAppIcon512" />
                        <label class="form-check-label" for="deleteAppIcon512">»èÁ¦</label>
                    </div>
                }
            </div>
        </div>

        <hr/>

        <div class="row">
            <div class="col text-center p-3">
                <button type="submit" class="btn btn-success">ÀúÀåÇϱâ</button>
            </div>
        </div>

        <br />
    </form>
</div>

@section Scripts {
    @* <partial name="_ValidationScriptsPartial" /> *@
}