{% extends 'base.html' %}
{% block extrahead %}
    {% load static %}
    {% load custom_tags_and_filters %}
    <script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static "datetimepicker/bootstrap-datetimepicker.css" %}" />
{% endblock %}
{% block title %}Alerts{% endblock %}
{% block content %}
    <h1>Alerts</h1>
    {% if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{% endif %}
    <p>
        You can create and edit alerts that will be visible to everyone. The alert will only be visible after the debut time and will be deleted after the expiration time.
    </p>
    <form action="{% url 'alerts' %}" method="post" class="well">
        <h4>
            {% if editing %}
                Edit this alert
            {% else %}
                Create a new alert
            {% endif %}
        </h4>
        {% csrf_token %}
        {% if form.instance.id %}<input type="hidden" name="alert_id" value="{{ form.instance.id }}">{% endif %}
        <div class="form-group">
            <label for="title">Title</label>
            {% if form.title.errors %}- <span style="color:red">{{ form.title.errors }}</span>{% endif %}
            <input type="text"
                   class="form-control"
                   name="title"
                   id="title"
                   value="{{ form.title.value|default_if_none:"" }}"
                   maxlength="{{ form.fields.title.max_length }}"
                   autofocus>
        </div>
        {% if alert_categories %}
            <div class="form-group">
                <label for="category">Type</label>
                {% if form.category.errors %}- <span style="color:red">{{ form.category.errors|striptags }}</span>{% endif %}
                <select id="category" name="category" class="form-control">
                    <option value="" disabled selected>Select an alert type</option>
                    {% for category in alert_categories %}
                        <option value="{{ category.name }}" {% if form.category.value == category.name %}selected{% endif %}>
                            {{ category.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
        {% endif %}
        <div class="form-group">
            <label for="contents">Contents</label>
            {% if form.contents.errors %}- <span style="color:red">{{ form.contents.errors|striptags }}</span>{% endif %}
            <textarea rows="3"
                      class="form-control"
                      name="contents"
                      id="contents"
                      maxlength="{{ form.fields.contents.max_length }}">{{ form.contents.value|default_if_none:"" }}</textarea>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-sm-6">
                    <label for="debut_time">Debut time</label>
                    {% if form.debut_time.errors %}- <span style="color:red">{{ form.debut_time.errors|striptags }}</span>{% endif %}
                    <input type="text"
                           class="form-control"
                           name="debut_time"
                           id="debut_time"
                           value="{% if form.debut_time.value %}{{ form.debut_time.value|input_date_format }}{% else %}{{ now|input_date_format }}{% endif %}">
                </div>
                <div class="col-sm-6">
                    <label for="expiration_time">Expiration time</label>
                    {% if form.expiration_time.errors %}
                        - <span style="color:red">{{ form.expiration_time.errors|striptags }}</span>
                    {% endif %}
                    <input type="text"
                           class="form-control"
                           name="expiration_time"
                           id="expiration_time"
                           value="{{ form.expiration_time.value|input_date_format }}">
                </div>
            </div>
        </div>
        <div class="form-group">{% button type="save" value=editing|yesno:"Save changes,Create alert" %}</div>
    </form>
    <div class="row">
        {% for a in alerts %}
            <div class="col-sm-6">
                <div class="alert alert-danger">
                    <form id="delete_alert_{{ a.id }}" method="post" action="{% url 'delete_alert' a.id %}">
                        {% csrf_token %}
                        <span class="glyphicon glyphicon-remove pull-right"
                              style="cursor:pointer"
                              onclick="$('#delete_alert_{{ a.id }}').submit()"
                              data-toggle="tooltip"
                              data-placement="top"
                              title="Delete this alert"></span>
                    </form>
                    <form id="edit_alert_{{ a.id }}" method="get" action="{% url 'alerts' %}">
                        <span class="glyphicon glyphicon-pencil pull-right"
                              style="margin-right:10px;
                                     cursor:pointer"
                              onclick="$('#edit_alert_{{ a.id }}').submit()"
                              data-toggle="tooltip"
                              data-placement="top"
                              title="Edit this alert"></span>
                        <input type="hidden" name="alert_id" value="{{ a.id }}">
                    </form>
                    {% if a.title %}
                        <span style="font-weight:bold">{{ a.title }}</span>
                        <br>
                    {% endif %}
                    {{ a.contents|linebreaks }}
                    Debuts on {{ a.debut_time }}
                    <br>
                    {% if a.expiration_time %}
                        Expires on {{ a.expiration_time }}
                    {% else %}
                        This alert will never expire
                    {% endif %}
                    <br>
                </div>
            </div>
        {% endfor %}
    </div>
    <script>
		let timepicker_properties = {
            format: "{{ datetime_input_js_format }}",
			sideBySide: true
		};
		$('#debut_time').datetimepicker(timepicker_properties);
		$('#expiration_time').datetimepicker(timepicker_properties);
		$('.glyphicon').tooltip({container: 'body'});
	
    </script>
{% endblock %}
