move project

Views/Home/Details.cshtml

@@ -0,0 +1,70 @@
+@model DetailsViewModel
+
+@using (Html.BeginForm("Details", "Home", FormMethod.Post )) {
+    @Html.AntiForgeryToken()
+    @Html.HiddenFor(m => m.VideoId)
+
+    <div class="mb-3">
+        @Html.LabelFor(m => m.Title)
+        @Html.TextBoxFor(m => m.Title, new { @class = "form-control", @required = "required" })
+        @Html.ValidationMessageFor(m => m.Title)
+    </div>
+    
+    <div class="mb-3">
+        @Html.LabelFor(m => m.Tags)
+        @foreach (var tag in Model.Tags)
+        {
+            <span class="badge rounded-pill text-bg-secondary" data-tag-name="@tag">
+                @Html.DisplayFor(m => tag)
+                <button type="button" class="btn-close btn-sm" aria-label="Close" onclick="removeTag('@tag')"></button>
+            </span>
+        }
+        <input type="text" id="newTag" class="form-control mt-2" placeholder="Add new tag" />
+        @for (int i = 0; i < Model.Tags.Count; i++)
+        {
+            <input type="hidden" class="hiddenTag" name="Tags[@i]" value="@Model.Tags.ElementAt(i)" />
+        }
+    </div>
+    
+    <button type="submit" class="btn btn-primary">Update Video</button>
+}
+
+@section Scripts {
+    <script>
+        $(document).ready(function() {
+            $('#newTag').on('keypress', function(e) {
+                if (e.which === 13) { // Enter key
+                    e.preventDefault();
+                    var tagName = $(this).val().trim();
+                    if (tagName) {
+                        $(this).val(''); // Clear input
+                        // check if a hidden input for this tag already exists
+                        var existingTag = $(`input[value='${tagName}']`);
+                        if (existingTag.length > 0) {
+                            return;
+                        }
+                        var tagCount = $('.hiddenTag').length;
+                        // Add the tag to a new hidden input
+                        var hiddenInput = `<input type="hidden" class="hiddenTag" name="Tags[${tagCount}]" value="${tagName}" />`;
+
+
+                        var tagHtml = `<span class="badge rounded-pill text-bg-secondary" data-tag-name="${tagName}">
+                                           ${tagName}
+                                           <button type="button" class="btn-close btn-sm" aria-label="Close" onclick="removeTag('${tagName}')"></button>
+                                       </span>`;
+                        $(this).after(hiddenInput);
+                        $(this).before(tagHtml);
+                        
+                    }
+                }
+            });
+
+            window.removeTag = function(tagName) {
+                // Remove the hidden input for the tag
+                $(`input[value='${tagName}']`).remove();
+                // Remove the badge from the UI
+                $(`span[data-tag-name='${tagName}']`).remove();
+            };
+        });       
+    </script>
+}