{% extends "_base.html" %}

{% block title %}{{ _('Settings | Lokole') }}{% endblock %}

{% from 'macros/form.html' import render_field %}
{% from 'macros/form.html' import render_button %}

{% block libs %}{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ 'css/settings.css' | asset_url }}">
{% endblock %}

{% block scripts %}{{ super() }}
<script type="text/javascript" src="{{ 'js/settings.js' | asset_url }}"></script>
{% endblock %}

{% block content %}{{ super() }}
<main>
<form action="{{ url_for('settings') }}" method="post" name="{{ form.name }}" enctype="multipart/form-data">
  {{ form.hidden_tag() }}

  <fieldset>
    <legend>{{ _('System information') }}
      <a class="btn btn-link" title="{{ _('Update code now') }}" href="{{ url_for('update') }}">
        <span class="fa fa-code" aria-hidden="true"></span>
      </a>
    </legend>
    {{ render_field(form.code_version) }}

    {{ render_field(form.sim_type) }}

    <legend>{{ _('Configure sync schedule') }}
      <a class="btn btn-link" title="{{ _('Sync emails now (%(number)s pending)', number=num_pending) }}" href="{{ url_for('sync') }}">
        <span class="fa fa-cloud-upload" aria-hidden="true"></span>
      </a>
    </legend>
    {{ render_field(form.sync_schedule) }}

    <legend>{{ _('Configure dial-up information') }}
      <a class="btn btn-link" title="{{ _('Launch wizard') }}" data-toggle="modal" data-target="#wvdial-modal">
        <span class="fa fa-external-link" aria-hidden="true"></span>
      </a>
    </legend>
    {{ render_field(form.wvdial) }}
  </fieldset>

  {{ render_button(form.submit, _('Save settings')) }}
</form>
</main>

<div class="modal fade" id="wvdial-modal" tabindex="-1" role="dialog" aria-labelledby="wvdial-title">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="{{ _('Close') }}">
          <span class="fa fa-times" aria-hidden="true"></span>
        </button>
        <h4 class="modal-title" id="wvdial-title">{{_('Dial-up configuration wizard')}}</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="wvdial-country">{{_('Select country')}}</label>
          <select id="wvdial-country" class="form-control"></select>
        </div>

        <div class="form-group">
          <label for="wvdial-provider">{{_('Select provider')}}</label>
          <select id="wvdial-provider" class="form-control"></select>
        </div>

        <div class="form-group">
          <label for="wvdial-apn">{{_('Select APN')}}</label>
          <select id="wvdial-apn" class="form-control"></select>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{{ _('Close') }}</button>
        <button type="button" class="btn btn-primary" id="generate-wvdial-config">{{ _('Generate configuration') }}</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}
