{% 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.agent_new' %}
{% set form_kwargs = {} %}
{% set button = _('Add') %}
{% else %}
{% set endpoint = 'agents.agent_edit' %}
{% set form_kwargs = {'id': agent.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">Agent 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>
{% if (current_user.role == 'admin') or (current_user.is_viewing_partnership) %}
<li>
<a href="#groups" data-toggle="tab">
<i class="material-icons">group</i> Groups
<div class="ripple-container"></div>
</a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
<div class="card-content">
<div class="tab-content">
<div class="tab-pane active" id="details">
{% call f.form_tag(endpoint, **form_kwargs) %}
<div class="row">
<div class="col-md-6 form-group label-floating">
{% call f.form_group(form.firstname, css_class='form-control') %}
{% endcall %}
</div>
<div class="col-md-6 form-group label-floating">
{% call f.form_group(form.lastname, css_class='form-control') %}
{% endcall %}
</div>
</div>
<div class="row">
<div class="col-md-6 form-group label-floating">
{% call f.form_group(form.title, css_class='form-control') %}
{% endcall %}
</div>
<div class="col-md-6 form-group label-floating">
{% call f.form_group(form.email, css_class='form-control') %}
{% endcall %}
</div>
</div>
<div class="row">
<div class="col-md-6 form-group label-floating">
{% call f.form_group(form.phonenumber, css_class='form-control') %}
{% endcall %}
</div>
<div class="col-md-6 form-group label-floating">
{% call f.form_group(form.mobile, css_class='form-control') %}
{% endcall %}
</div>
</div>
<div class="row">
<div class="col-md-6 form-group label-floating">
{% call f.form_group(form.extension, css_class='form-control') %}
{% endcall %}
</div>
<div class="col-md-6 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">
<div id="divAllHours" class="allHours" style="display:none;">
{{ agent.all_hours }}
</div>
<div class="row">
<div class="col-md-12 schedule">
<div class="row">
<div class="col-xs-2 form-group label-floating">
<label class="control-label">Available All Hours</label>
<div id="divTwentyFourSeven">
<div class="checkbox">
<label>
<input id="chkAllHours" class="chkAllHours" type="checkbox" name="allhours">
</label>
</div>
</div>
</div>
<div class="col-xs-6 form-group label-floating">
<label class="control-label">Schedule Timezone</label>
<select id="schedule-timezone" class="form-control">
</select>
</div>
</div>
<div class="row">
<div class="col-md-2 col-xs-4 form-group label-floating">
<label class="control-label">Available Days</label>
</div>
<div class="col-md-5 col-xs-4 form-group label-floating">
<label class="control-label">Available From</label>
</div>
<div class="col-md-5 col-xs-4 form-group label-floating">
<label class="control-label">Available To</label>
</div>
</div>
<div id="row-sunday" class="row day-row-sunday">
<div class="col-md-2 col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Sunday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chSunday" type="checkbox" class="dayButton sunday" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-md-5 col-xs-4 row-from">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-sunday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-md-5 col-xs-4 row-to">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-sunday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div id="row-monday" class="row day-row-monday">
<div class="col-md-2 col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Monday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chMonday" type="checkbox" class="dayButton monday" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-md-5 col-xs-4 row-from">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-monday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-md-5 col-xs-4 row-to">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-monday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div id="row-tuesday" class="row day-row-tuesday">
<div class="col-md-2 col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Tuesday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chTuesday" type="checkbox" class="dayButton tuesday" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-md-5 col-xs-4 row-from">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-tuesday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-md-5 col-xs-4 row-to">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-tuesday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div id="row-wednesday" class="row day-row-wednesday">
<div class="col-md-2 col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Wednesday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chWednesday" type="checkbox" class="dayButton wednesday" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-md-5 col-xs-4 row-from">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-wednesday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-md-5 col-xs-4 row-to">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-wednesday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div id="row-thursday" class="row day-row-thursday">
<div class="col-md-2 col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Thursday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chThursday" type="checkbox" class="dayButton thursday" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-md-5 col-xs-4 row-from">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-thursday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-md-5 col-xs-4 row-to">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-thursday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div id="row-friday" class="row day-row-friday">
<div class="col-md-2 col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Friday</label>
<div class="togglebutton" style="float:right;">
<label>
<input id="chFriday" type="checkbox" class="dayButton friday" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-md-5 col-xs-4 row-from">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-friday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-md-5 col-xs-4 row-to">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-friday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
<div id="row-saturday" class="row day-row-saturday">
<div class="col-md-2 col-xs-4">
<div class="day-holder" style="padding-top:22px;">
<label style="padding-top:4px;">Saturday</label>
<div class="togglebutton" class="dayButton" style="float:right;">
<label>
<input id="chSaturday" type="checkbox" class="dayButton saturday" name="optionsCheckboxes">
</label>
</div>
</div>
</div>
<div class="col-md-5 col-xs-4 row-from">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-from-saturday" type="text" class="form-control available-from" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
<div class="col-md-5 col-xs-4 row-to">
<div class="input-group bootstrap-timepicker timepicker">
<input id="available-to-saturday" type="text" class="form-control available-to" value=""/>
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
</div>
</div>
</div>
<div id="schedule-days" style="display:none;">
{%for schedule in agent.schedules%}
<div id="{{schedule.day}}" class="schedule-day">
<div class="day_id">{{schedule.id}}</div>
<div class="is_active">{{schedule.is_active}}</div>
<div class="avail_from">{{schedule.available_from}}</div>
<div class="avail_to">{{schedule.available_to}}</div>
</div>
{%endfor%}
</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>
{% if (current_user.role == 'admin') or (current_user.is_viewing_partnership) %}
<div class="tab-pane" id="groups">
<div class="table-responsive">
<table class="table table-striped" id="agent-groups-table">
<thead>
<tr>
<th class="text-center">
No
</th>
<th>Group Name</th>
<th>Included in Group</th>
</tr>
</thead>
<tbody>
{% for group in groups %}
<tr>
<td class="text-center">
{{ loop.index }}
</td>
<td>{{ group.full_name | e }}</td>
<td>
<div class="checkbox">
<label>
<input type="checkbox" data-groupid="{{ group.id }}" {{-
"checked" if group in agent.groups else ""
}}>
</label>
</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">
{{ button }}
</button>
<a href="{{ url_for('agents.call_agents') }}"
class="btn btn-simple">
{{ _('Cancel') }}
</a>
</div>
</div>
</div>
{% endif %}
{% endcall %}
</div>
</div>
</div>
</div>
</div>
</div>