{% extends "base.html" %}

{% block content %}
<div class="container py-3 h-100">
  <div class="row d-flex justify-content-center align-items-center h-100">
    <div class="col col-xl-10">
      <div class="row g-0">
        <!--------Bookmark Logo---------->
        <div class="col-md-6 col-lg-5 d-none d-md-block">
          <img
            src="/static/logo/bookmark_logo.png"
            alt="bookmark_logo"
            style="width: 1000px;"
          />
        </div>
        <!--------Create Bookmark form--------->
        <div class="col-md-6 col-lg-7 d-flex align-items-center">
          <div class="card-body p-4 p-lg-5 text-black">
            <form method="POST" enctype="multipart/form-data">
              <div class="d-flex align-items-center mb-3 pb-1">
                <span class="h1 fw-bold mb-0">Create your bookmark</span>
              </div>
              <!---------Input:Website Link--------->
              <div class="form-outline mb-4">
                <label class="form-label" for="web_link">Website Link</label>
                <input type="text" name="web_link" class="form-control form-control-lg" />
              </div>
              <!---------Input:Name--------->
              <div class="form-outline mb-4">
                <label class="form-label" for="web_name">Name  <b>(Up to 12 characters in length)</b></label>
                <input type="text" name="web_name" maxlength="12" class="form-control form-control-lg" />
              </div>
              <!---------Select Group or Input new Group--------->
              <div class="form-outline mb-4">
                  <label class="form-label" for="web_group">Existing Groups  <b>(Up to 12 characters in length)</b></label><br>
                  <select name="web_group" style="height:47px" required aria-invalid="false"> 
                    <option value="cng-555">Create new group:</option>
                    {% for bg in bgroups %}
                    <option name="web_group" value="{{ bg.group }}">{{ bg.group }}</option>
                    {% endfor %}
                  </select>
                  <input type="text" name="new_group" maxlength="12" style='position:relative; left:20px; padding-right: 0px; height:47px;' placeholder="Name new group here"/>
              </div>  
              <!---------Select Public Or Private Status--------->
              <div class="form-outline mb-4">
                  <label class="form-label" for="share_public_private">Is this a Public or Private bookmark?</label><br>
                  <input type="radio" id="share_public_private" name="share_public_private" value="public" checked="checked" style="transform:scale(2);" >
                  <label for="Public">&nbspPublic</label><br>
                  <input type="radio" id="share_public_private" name="share_public_private" value="private" style="transform:scale(2);">
                  <label for="Private">&nbspPrivate</label><br>
              </div>
              <!---------Submit Button--------->
              <div class="pt-1 mb-4">
                <button class="btn btn-dark btn-lg btn-block" type="submit">Create</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}