{% extends 'base.html' %}


{% block title %}{{ title }}{% endblock %}

{% block content %}

<div class="container-fluid">
    <div class="row">
        <div class="col">
        </div>
        <div class="col">
            <div class="container-fluid shadow-sm p-2 mb-5 bg-white rounded">
                <h5 class="card-header">My Websites</h5>
                    <div class="card-body"> 
                        <div class="add-button">
                            <button type="button" class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#exampleModal">+ Add a Website</button>
                        </div>
                        <p></p>
                        <div class="websites-dashboard">
                          {% for query in website_query %}
                          {% if current_user_id == query.user_id %}  
                          <div class="card-body">
                              <div class="card" style="width: auto;">
                                  <div class="card-header">
                                  <a>Name: {{ query.website_name }}</a>
                                  </div>
                                  <a href="{{ url_for('users.monitoring', website_url=query.website_name) }}">{{ query.website_url }}</a>
                                  <li></li>
                              </div>
                          </div>
                          {% endif%}
                          {% endfor %}
                          <p>
                        </div>
                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <h5 class="modal-title" id="exampleModalCenterTitle">Add a website</h5>
                                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                  </button>
                                </div>
                                <div class="modal-body">
                                    <form method="POST", action="">
                                        {{ form.hidden_tag() }}
                                        <fieldset class="form-group">
                                            <div class="form-group">
                                                {{ form.name.label(class="form-control-label") }}
                                                {{ form.name(class="form-control form-control") }}
                                            </div>
                                            <div class="form-group">
                                                {{ form.website_url.label(class="form-control-label") }}
                                                {{ form.website_url(class="form-control form-control") }}
                                            </div>
                                            <div class="form-check">
                                              {{ form.monitoring_activated(class="form-check-input") }}
                                              {{ form.monitoring_activated.label(class="form-check-label") }}
                                          </div>
                                        </fieldset>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                  {{ form.submit(class="btn btn-primary") }}
                                </form>
                                </div>
                              </div>
                            </div>
                        </div>                      
                    </div>
            </div>
        </div>
        <div class="col">
        </div>
    </div>
</div>

{% endblock %}