@model atakanozbancom.Models.classes.AdminSocialIconVM
@{
    ViewBag.Title = "Add New Social Icon";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />

<h2 class="text-white mt-3">Add New Social Icon</h2>
<hr />

@using (Html.BeginForm("newsocialicon", "admin", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(false, "", new { @class = "alert alert-danger" + (ViewData.ModelState.IsValid ? " d-none" : "") })

    <div class="mb-3">
        @Html.LabelFor(p => p.icon, new { @class = "text-white" })
        <div class="input-group">
            <span class="input-group-text bg-dark text-white fs-4" style="width:3rem;justify-content:center;">
                <i id="icon-preview" class="@Model.icon"></i>
            </span>
            @Html.TextBoxFor(p => p.icon, new { @class = "form-control bg-dark text-white", placeholder = "e.g. fa-brands fa-youtube", id = "icon-input" })
        </div>
        <small class="text-muted">
            Any <a href="https://fontawesome.com/search?ic=brands" target="_blank" rel="noopener" class="text-info">Font Awesome</a> class name, e.g. <code>fa-brands fa-youtube</code> or <code>fa-solid fa-link</code>.
        </small>
    </div>

    <div class="mb-3">
        @Html.LabelFor(p => p.url, new { @class = "text-white" })
        @Html.TextBoxFor(p => p.url, new { @class = "form-control bg-dark text-white", placeholder = "https://..." })
    </div>

    <div class="mb-3">
        @Html.LabelFor(p => p.sort_order, new { @class = "text-white" })
        @Html.TextBoxFor(p => p.sort_order, new { @class = "form-control bg-dark text-white", type = "number" })
        <small class="text-muted">Lower numbers show first.</small>
    </div>

    <button class="btn btn-success">Save</button>
}

<script>
    document.getElementById('icon-input').addEventListener('input', function () {
        document.getElementById('icon-preview').className = this.value;
    });
</script>