PavelAndreyev1337_itransition-course-project/CollectionApp/CollectionApp.WEB/Views/Collection/Form.cshtml
@using Microsoft.AspNetCore.Mvc.Localization
@using CollectionApp.WEB.ViewModels
@model CollectionApp.WEB.ViewModels.CollectionViewModel

@inject IViewLocalizer Localizer

@{
    Layout = "_Layout";
}

<link rel="stylesheet" href="~/lib/filepond/filepond.min.css" />
<link rel="stylesheet" href="~/lib/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" />
<link rel="stylesheet" href="~/lib/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.min.css" />

<nav class="mt-2">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a asp-controller="Collection"
               asp-action="Index"
               asp-route-page="@Context.Request.Cookies["collectionPage"]"
               asp-route-userId="@ViewData["userId"]">
                @Localizer["Collections"]
            </a>
        </li>
        <li class="breadcrumb-item active">@Localizer["Collection"]</li>
    </ol>
</nav>

<div class="col-5 mt-2 mx-auto">
    <form id="collectionForm"
          class="my-2 needs-validation"
          method="post"
          asp-route-userId="@ViewData["userId"]"
          asp-route-collectionId="@Model.Id"
          enctype="multipart/form-data"
          novalidate>
        <div class="mb-3">
            <label class="form-label" asp-for="Name">@Localizer["Name"]</label>
            <input type="text" class="form-control" asp-for="Name" required />
            <div class="valid-feedback">
                @Localizer["LooksGood"]
            </div>
            <div class="invalid-feedback">
                @Localizer["Required"]
            </div>
        </div>
        <div class="mb-3">
            <label asp-for="ShortDescription">@Localizer["Description"]</label>
            <textarea class="form-control" placeholder="@Localizer["MarkdownDescription"]..." asp-for="ShortDescription" required></textarea>
            <div class="valid-feedback">
                >@Localizer["LooksGood"]
            </div>
            <div class="invalid-feedback">
                >@Localizer["Required"]
            </div>
        </div>
        <div class="mb-3">
            <label class="form-label" asp-for="Topic">@Localizer["Topic"]</label>
            <select class="form-control" asp-for="Topic" required>
                @foreach (var topic in Model.Topics)
                {
                    <option value="@topic">@topic</option>
                }
            </select>
            <div class="valid-feedback">
                @Localizer["LooksGood"]
            </div>
            <div class="invalid-feedback">
                @Localizer["Required"]
            </div>
        </div>
        <input type="file"
               class="filepond"
               asp-for="Files"
               multiple
               data-max-file-size="3MB">
        @await Html.PartialAsync("_GetExtraField", new ExtraFieldViewModel { Prefix = "First", Name = Model.FirstFieldName, FieldType = Model.FirstFieldType })
        @await Html.PartialAsync("_GetExtraField", new ExtraFieldViewModel { Prefix = "Second", Name = Model.SecondFieldName, FieldType = Model.SecondFieldType })
        @await Html.PartialAsync("_GetExtraField", new ExtraFieldViewModel { Prefix = "Third", Name = Model.ThirdFieldName, FieldType = Model.ThirdFieldType })
        <div class="mb-5 pb-3">
            <button id="submitAll" class="btn btn-primary d-block mx-auto w-50" type="submit">@Localizer["Submit"]</button>
        </div>
    </form>
</div>

<script src="~/lib/filepond/filepond.min.js"></script>
<script src="~/lib/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="~/lib/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"></script>
<script src="~/lib/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>
<script src="~/lib/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.min.js"></script>
<script src="~/lib/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>
<script src="~/js/collection.js"></script>
