{% extends 'base.html' %}

{% block content %}
<div class="container">
  <form method="post" action="{{ url_for('add_link', link_name='') }}">
  <div class="row">
    <div class="col-sm-2">
        <input type="text" name="link_name" placeholer="name"></input>
    </div>
    <div class="col-sm-8">
        <input type="text" name="target" placeholder="http://example.com"></input>
    </div>
    <div class="col-sm-1">
        <button type="submit">Add</button>
    </div>
  </div>
  </form>
  {% for link in links %}
  <div class="row gx-5 border">
    <div class="col-sm-2" >
        <div class="border bg-light">
            <a href="/{{ link['name'] }}">{{ link['name'] }}</a>
        </div>
    </div>
    <div class="col-sm-8">
        {{ link['target'] }}
    </div>
    <div class="col-sm-1">
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#linkCollapse{{ link['id'] }}" role="button" aria-expanded="false" aria-controls="linkCollapse{{ link['id'] }}">
          Details
        </a>
    </div>
    <div class="collapse" id="linkCollapse{{ link['id'] }}">
      <div class="card card-body">
        <div>
            <div class="container">
                <form method="post" action="{{ url_for('edit_link', link_name=link.name) }}">
                <div class="mb-3">
                    <label for="formNameInput" class="form-label">Name</label>
                    <input type="text" readonly class="form-control-plaintext" id="formNameInput" name="link_name" placeholder="{{ link.name }}">
                  </div>
                  <div class="mb-3">
                    <label for="formTargetInput" class="form-label">Target</label>
                    <input type="text" class="form-control" id="formTargetInput" name="target" value="{{ link.target }}">
                  </div>
                  <div class="mb-3">
                    <button type="submit">Update</button>
                    </form>
                    <form method="post" action="{{ url_for('delete_link', link_id=link.id) }}">
  
                    <button type="submit">Delete</button>
                    
                    </form>
                    </div>
            </div>
        </div>
      </div>
    </div>
  </div>
    {% endfor %}
</div>
{% endblock %}