{% extends "base.html.twig" %}

{% block title %}Add alert{% endblock %}

{% form_theme form _self %}

{% block form_row -%}
    {% set row_class = attr['data-row-class'] | default('form-group') %}
    <div class="form-group {{ row_class }}">
        {{- form_label(form) -}}
        {{- form_widget(form) -}}
        {% for attrname, attrvalue in attr %}
            {% if attrname == 'help' %}
                <span class="help-block">{{ attrvalue }}</span>
            {% endif %}
        {% endfor %}
        {#  {{- form_errors(form) -}} #}
    </div>
{%- endblock form_row %}

{% block form_footer_widget %}
    <div class="modal-footer">
        <a class="btn btn-secondary" href="{{ path('admin_alerts') }}"><i class="fas fa-arrow-left"></i> Back to Alerts List</a>
        {{ form_widget(form) }}
    </div>
{% endblock %}

{% block body %}

    <div class="row">
      <div class="col-md-5">
        <div class="bgc-white p-20 bd">
          <h5 class="c-grey-900">Create New Alert</h5>
            <hr class="mB-30">
          <div class="mT-30">
              {{ form(form) }}
          </div>
        </div>
      </div>
    </div>

{% endblock body %}

{% block javascripts %}

    {{ parent() }}

    {% include 'alert/js.html.twig' with {'action': 'add'} %}

{% endblock %}

{% block stylesheets %}

    {{ parent() }}

    <style>

    .alert-form-control {
        background-clip: padding-box;
        background-color: #fff;
        border-radius: .25rem;
        color: #495057;
        display: block;
        font-size: 1rem;
        font-weight: 400;
        height: calc(1.5em + .75rem + 2px);
        line-height: 1.5;
        -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
        transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
        width: 100%;
    }
    </style>

 {% endblock %}