{% extends "layouts/base.html" %}
{% block content %}
<br>
<div class="row">
  <div class="col-md-9">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a class="mb-0" href="{{ url_for('home_blueprint.show_ws') }}">Workspaces</a> </li>
        <li class="breadcrumb-item active" aria-current="page"></li>
      </ol>
    </nav>
  </div>

  <div class="col-md-3"><span class="float-end">
      <a class="btn btn-sm btn-primary" href="{{ url_for('home_blueprint.create_ws') }}">{{ ('New Workspace') }}</a>
    </span>
  </div>
</div>

<div class="row">
  <div class="col-12 mb-4">
    <div class="card border-0 shadow">
      <div class="card-header">
        <div class="row align-items-center">
          <div class="col">
            <h2 class="fs-5 fw-bold mb-0">List of all workspaces</h2>
          </div>
          <div class="col text-end">
            <a href="#" class="btn btn-sm btn-primary"></a>
          </div>
        </div>
      </div>
      <div class="table-responsive ">
        <table class="table align-items-center table-striped table-flush">
          <thead>
            <tr>
              <th>{{ ('Owner') }}</th>
              <th>{{ ('title') }}</th>
              <th>{{ ('Ceated') }}</th>
              <th>{{ (':') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for data in ws %}
            {# Checks if book is marked as hidden #}
            {%- if data.hidden %}{% continue %}{% endif %}
            <tr>
              <td>
                <div class="media align-items-left">
                  <a href="#" class="avatar rounded-circle mr-3">
                    <img alt="Image placeholder"
                      src="https://robohash.org/sitsequiquia.png?size=50x50&set=set{{ data.owner_id }}"></a>
                  <div class="media-body2"> {{ data.owner_name.username }} </div>
                </div>
              </td>
              <td>
                <a class="mb-0 text-sm"
                  href="{{ url_for('home_blueprint.show_ws_nodes', ws_id=data.group_id) }}">{{data.ws_name}}</a>
              </td>
              <td>{{data.created_date}}</td>
              <td>
                <a type="button" class="close" href="{{ url_for('home_blueprint.share_ws', ws_id=data.group_id)}}">
                  <i class="bi bi-pencil-square"></i>
                </a>
                <a type="button" class="close" href="{{ url_for('home_blueprint.share_ws', ws_id=data.group_id)}}">
                  <i class="bi bi-trash-fill"></i>
                </a>

              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>


        <td>{{ws.access_to}}</td>
      </div>
    </div>
  </div>


  <!-- start tabs pane -->
  <div class="panel with-nav-tabs panel-default">
    <div class="panel-heading">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1default" data-toggle="tab">Default 1</a></li>
        <li><a href="#tab2default" data-toggle="tab">Default 2</a></li>

        <li><a href="#tab3default" data-toggle="tab">Default 3</a></li>
        <!--
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#tab4default" data-toggle="tab">Default 4</a></li>
                        <li><a href="#tab5default" data-toggle="tab">Default 5</a></li>
                    </ul>
                </li>
                -->
      </ul>
    </div>
    <div class="panel-body">
      <div class="tab-content">
        <div class="tab-pane fade in active" id="tab1default">Default 1</div>
        <div class="tab-pane fade" id="tab2default">Default 2</div>
        <div class="tab-pane fade" id="tab3default">Default 3</div>
        <!--
            <div class="tab-pane fade" id="tab4default">Default 4</div>
            <div class="tab-pane fade" id="tab5default">Default 5</div>
            -->
      </div>
    </div>
  </div>
</div>
{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}