{% import 'macros/form.jinja2' as f with context %}
{% import 'macros/layout/flash.jinja2' as flash with context %}

{% if request.endpoint.endswith('new') %}
    {% set endpoint = 'agents.group_new' %}
    {% set form_kwargs = {} %}
    {% set button = _('Add') %}
{% else %}
    {% set endpoint = 'agents.group_edit' %}
    {% set form_kwargs = {'id': group.id} %}
    {% set button = _('Save') %}
{% endif %}

<div class="content">
    <div id="flash-messages">
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="card">
                <div class="card-header card-header-tabs" data-background-color="light-blue">
                    <div class="nav-tabs-navigation">
                        <div class="nav-tabs-wrapper">
                            <span class="nav-tabs-title">Group Settings:</span>
                            <ul class="nav nav-tabs" data-tabs="tabs">
                                <li class="active">
                                    <a href="#details" data-toggle="tab">
                                        <i class="material-icons">info_outline</i> Details
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#schedule" data-toggle="tab">
                                        <i class="material-icons">schedule</i> Schedule
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#agents" data-toggle="tab">
                                        <i class="material-icons">person</i> Agents
                                        <div class="ripple-container"></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    {% call f.form_tag(endpoint, **form_kwargs) %}
                    <div class="tab-content">
                        <div class="tab-pane active" id="details">
                            <div class="row">
                                <div class="col-md-4 form-group label-floating">
                                    {% call f.form_group(form.name, css_class='form-control') %}
                                    {% endcall %}
                                </div>
                                <div class="col-md-8 form-group label-floating">
                                    {% call f.form_group(form.description, css_class='form-control') %}
                                    {% endcall %}
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-12" style="text-align:center">
                                    <button type="submit" class="btn btn-fill btn-light-blue">
                                    {{ button }}
                                    </button>

                                    <a href="{{ url_for('agents.call_agents') }}"
                                     class="btn btn-simple">
                                    {{ _('Cancel') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="schedule">
                            Groups inherent the schedules of the agents added to the group. To adjust the schedule for
                            a group you'll need to adjust the schedules of the individual agents added to the group.
                            <br /><br />
                            <a href={{ url_for('agents.call_agents') }}>Return to the agent's table</a>
                        </div>
                        <div class="tab-pane" id="agents">
                            <div class="row">
                                <div class="col-md-4 form-group label-floating is-empty">
                                    <label for="label" class="control-label">Select an agent
                                    </label>
                                    <select class="form-control" id="available-agents">
                                        <option value=""></option>
                                        {% for agent in agents %}
                                        <option value="{{ agent.id }}">{{ agent.full_name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <button id="add-to-group" type="submit" class="btn btn-fill btn-success">
                                    {{ _('Add agent to group') }}
                                    </button>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th class="text-center">
                                                No
                                            </th>
                                            <th>Agent name</th>
                                            <th>Phone number</th>
                                            <th>Available now</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="group-agents">
                                        {% for agent in group_agents %}
                                        <tr data-agentid="{{ agent.id }}">
                                            <td>
                                                {{ loop.index }}
                                            </td>
                                            <td>{{ agent.full_name|e }}</td>
                                            <td>{{ agent.phonenumber|e }}</td>
                                            <td>{{ "Yes" if agent.available_now else "No" }}</td>
                                            <td>
                                                <div class='btn-group'>
                                                    <a href={{ url_for('agents.call_agents') }}
                                                        class='btn btn-xs btn-danger btn-table-action'
                                                        data-original-title='Edit' title='Edit' data-toggle='tooltip'>
                                                        <i class="material-icons">close</i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-12" style="text-align:center">
                                    <button type="submit" class="btn btn-fill btn-light-blue" id="submit-it">
                                    {{ button }}
                                    </button>

                                    <a href="{{ url_for('agents.call_agents') }}"
                                     class="btn btn-simple">
                                    {{ _('Cancel') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endcall %}
                </div>
            </div>
        </div>
    </div>
</div>