@extends("layouts.dashboard")

@section("title", "Add new category - Dashboard | TechnoBlog")

@section("dashboard_content")

<div class="my-3 my-md-5">

		<div class="container">

			<div class="row">

				<div class="col-sm-12">

					<form class="card actionForm" action="{{ route("dashboard.categories.edit", ["id" => $category->id]) }}" method="post" accept-charset="UTF-8">

						<nav aria-label="breadcrumb">
							<ol class="breadcrumb" style="border-radius: 0px !important;">
								<li class="breadcrumb-item">
									<a href="{{ route("dashboard.index") }}">Dashboard</a>
								</li>
								<li class="breadcrumb-item">
									<a href="{{ route("dashboard.categories.index") }}">Categories</a>
								</li>
								<li class="breadcrumb-item active" aria-current="page">Edit</li>
							</ol>
						</nav>

						<div class="card-body">

							<h3 class="card-title border-bottom pb-4">Edit category</h3>

                            @method("patch")
							@csrf

							<div class="row">

								<div class="col-md-6 m-auto">

									<fieldset class="form-fieldset">

										<p class="text-dark pb-4">Please note that the new category will be unavailable for users until publishing your first post.</p>

										<div class="form-group">
											<label class="form-label">Name</label>
											<input type="text" name="name" value="{{ old("name", $category->name) }}" autocomplete="off" class="form-control" required>
										</div>

										<div class="form-group">
											<label class="form-label">Choose color for new category</label>
											<div class="input-group">
												<input type="text" name="color" value="{{ old("color", $category->color) }}" class="form-control categoryColor" autocomplete="off" required>
											</div>
										</div>

									</fieldset>

								</div>

							</div>

						</div>

						<div class="card-footer text-right">
							<input type="submit" value="Edit category" class="submitBtn btn btn-primary">
						</div>

					</form>

				</div>

			</div>

		</div>

	</div>

@endsection