{% macro render_field(field, icon_prefix=None) %}
    {% if icon_prefix %}
        <i class="material-icons prefix">{{ icon_prefix }}</i>
    {% endif %}
    {% if field.errors %}
        {{ field(class='invalid data') }}
        {{ field.label(class='active') }}
        {% for err in field.errors %}
            <span class="helper-text" data-error="{{ err }}"></span>
        {% endfor %}
    {% else %}
        {{ field }}
        {{ field.label }}
    {% endif %}
{% endmacro %}

{% macro make_toast(message, style, close_btn_msg) %}
    <div class="toast" {% if style %}style="{{ style }}"{% endif %}>
        <span>{{ message|safe -}}</span>
        <button class="btn-flat toast-action" onclick="this.parentElement.remove();">
            {% if close_btn_msg %}
                {{ close_btn_msg|safe }}
            {% else %}
                &times;
            {% endif %}
        </button>
    </div>
{% endmacro %}


{% macro make_modal_form(id, title, form_url, form_id, form_submit_btn_id) %}
    <div class="modal fade-in" id="{{ id }}-modal" data-body-url="{{ form_url }}" data-form-id="{{ form_id }}" data-form-submit-btn="{{ form_submit_btn_id }}">
        <div class="row blue white-text modal-ux-header">
            <h4 class="left-align">{{ title }}</h4>
        </div>
        <div class="modal-content model-ux" id="{{ form_id }}"></div>
    </div>

    <script type="text/javascript">
        $('#{{ form_id}}').on('click', '#{{ form_submit_btn_id }}', function() {
           $.ajax({
               url: '{{ form_url }}',
               type: 'POST',
               data: $('#{{ form_id}}').find('form').serialize(),
               success: function(data, status) {
                   if ('redirect' in data) {
                       let req = new XMLHttpRequest();
                       req.open('GET', data.redirect);
                       // get the access token if there is one and put it in the request header
                       if ('access_token' in data) {
                           req.setRequestHeader('Auth-Token', `Bearer ${data.access_token}`);
                       }
                       // make the request
                       window.location.replace(data.redirect);
                   }
                   else {
                       $('#{{ form_id }}').html(data);
                   }
               }
           });
         });
    </script>
{% endmacro %}

{% macro link_modal(id, class, content, modal_id) %}
    <a class="{{ class }} modal-trigger waves-effect waves-light" id="{{ id }}" href="#{{ modal_id }}">{{ content | safe }}</a>
{% endmacro %}