<style>
    body {
        background-image: url('/images/login.jpg');
        background-size: cover;
    }
    input, button { border: black 1px solid }
</style>
<p><font color="#FF0000">TEMPORARY FORM REPLACE THIS BEFORE PUSHING TO PROD</font></p>
<form method="POST" action="{{ route('bookmarks.create-bookmark') }}">
    @csrf
    <table>
        <tr>
            <td><label for="name"><strong>Name:</strong></label></td>
            <td><input name="name" type="text" id="name"></td>
        </tr>
        <tr>
            <td><label for="url"><strong>URL:</strong></label>/td></td>
            <td><input name="url" type="text" id="url"></td>
        </tr>
        <tr>
            <td><label for="description"><strong>Description:</strong></label></td>
            <td><input name="description" type="text" id="description"></td>
        </tr>
        <tr>
            <td><label for="category"><strong>Category:</strong></label></td>
            <td>
                <select id="category" name="category">
                    <option value="" disabled>-- Select Category --</option>
                    @foreach ($categories as $category)
                        <option value="{{$category->id}}"> {{$category->name}} </option>
                    @endforeach
                </select>
            </td>
        </tr>
    </table>

    <button type="submit">Submit</button>
</form>

<a href="{{ route('bookmarks') }}"><img src="/images/buttons/elwiwi.png"> el wiwi</a>
