{% extends 'base.html' %}
{% with active_page="organizations" %}

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

{% block head %}
    {{ block.super }}
    <script type="text/javascript">
        $(document).ready(function(){
            $('#orgsTable').DataTable();
            $('#domsTable').DataTable();

            $('#addOrgBtn').click(function(){
                $('#addOrg').removeAttr('hidden');
            });
            $('#closeAddOrg').click(function(){
                $('#addOrg').attr('hidden','');
            });
        });
    </script>
{% endblock %}

{% block body %}
<div class="row">
    <div class="col-sm-6">
            <button id="addOrgBtn" type="button" class="btn btn-primary btn-sm float-right">Add <span class="sr-only">organization</span></button>
        <h1>Organizations</h1>
        <table class="table table-striped" id="orgsTable">
            <thead class="thead-dark">
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                {%  for org in orgs %}
                <tr>
                    <td>{{org.name}}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="col-sm-6">
        <form hidden id="addOrg" action="" method="POST">{% csrf_token %}
            <button id="closeAddOrg" type="button" class="close" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h2>Add organization</h2>

            <div class="form-group row">
                <label for="organizationName" class="col-sm-2 col-form-label">Name:</label>
                <input name="name" type="text" class="col-sm-10 form-control" id="organizationName" placeholder="Organization name">
            </div>
            <button type="submit" class="btn btn-success">Add</button>
        </form>
    </div>

</div>
{% endblock %}
{% endwith  %}