{% extends "base.html" %}

{% block content %}
<script type="text/javascript">
  function CheckOtherToShowTextBox(val){
   var element=document.getElementById('web_group');
   if(val=='others')
     element.style.display='block';
   else  
     element.style.display='none';
  }
  
</script>  
    <div class="container py-5 h-100">
      <div class="row d-flex justify-content-center align-items-center h-100">
        <div class="col col-xl-10">
          <div class="card" style="border-radius: 1rem;">
            <div class="row g-0">
              <div class="col-md-6 col-lg-5 d-none d-md-block">
                <img
                  src="/static/logo/edit_logo.png"
                  alt="edit_logo"
                  class="img-fluid" style="border-radius: 1rem 0 0 1rem;"
                />
              </div>
              <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>
 
                    <div class="form-outline mb-4">
                      <label class="form-label" for="web_link">Website Link</label>
                      <input type="text" id="web_link" class="form-control form-control-lg" />
                    </div>
  
                    <div class="form-outline mb-4">
                      <label class="form-label" for="web_name">Name</label>
                      <input type="text" id="web_name" class="form-control form-control-lg" />
                    </div>

                    <div class="form-outline mb-4">
                        <label class="form-label" for="web_group">Group Name</label><br>
                        <select name="web_group" onchange='CheckOtherToShowTextBox(this.value);'> 
                          <option value="Calculator">Calculator</option>
                          <option value="Cipher_Encoder">Cipher Encoder</option> 
                          <option value="Education">Education</option>     
                          <option value="Online_food_ordering">Online food ordering</option>
                          <option value="Restaurant">Restaurant</option> 
                          <option value="Social_Media">Social Media</option> 
                          <option value="others">Others</option>   
                        </select>
                        <input type="text" name="web_group" id="web_group" style='display:none;position:relative; left:150px; top:-20px;'/>
                    </div>  
                    
                    <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" >
                        <label for="Public">Public</label><br>
                        <input type="radio" id="share_public_private" name="share_public_private" value="private">
                        <label for="Private">Private</label><br>
                    </div>  

                    <div class="pt-1 mb-4">
                      <button class="btn btn-dark btn-lg btn-block" type="button">Modify</button>
                    </div>
  
                
                  </form>
  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

{% endblock %}