{% extends "bitcaster/base.html" %}
{% load i18n static %}
{% block head %}
    <meta name="s" content="{{ secret }}" />
    <meta name="u" content="{{ unsubscribe_url }}" />
    <meta name="k"  content="{{ private_key }}" />
    <meta name="w"  content="{{ sw }}" />
    {{ block.super }}
    <link rel="stylesheet" href="{% static "webpush/webpush.css" %}" />
    {{ media }}
{% endblock head %}
{% block body %}
    <div class="webpush">
        <div class=" center mt-5">
            <div class="center logo">
                <img src="{% static "bitcaster/images/logos/bitcaster.svg" %}" />
            </div>
            <div id="supported" style="display: none">
                <div class="center subscribe">
                    <h1>
                        {{ owner }}
                    </h1>
                </div>
                <div class="p-5">
                    {% if assignment.data.status == "denied" %}
                        <h2>
                            {% translate 'you have already denied the authorization' %}
                        </h2>
                        <div class="center w-100 ">
                            <input class="button green" type="button" id="subscribe" value="{% translate "Allow" %}" />
                        </div>
                    {% elif assignment.data.webpush %}
                        <h2>
                            {% translate 'Already subscribed' %}
                        </h2>
                        <div class="center w-100 ">
                            <input class="button green" type="button" id="subscribe" value="{% translate "Refresh exiting subscription" %}" />
                            <input class="button " type="button" id="deny" value="{% translate "Cancel exiting subscription" %}" />
                        </div>
                    {% else %}
                        <h2>
                            {% translate 'wants to send you push notifications' %}
                        </h2>
                        <div class="center w-100 ">
                            <input class="button green" type="button" id="subscribe" value="{% translate "Allow" %}" />
                            <input type="button" id="deny" value="{% translate "Deny" %}" />
                        </div>
                    {% endif %}
                </div>
            </div>
            <div id="unsupported" class="p-1" style="display: none">
                <h1>
                    {% translate "We are sorry this browser does not support notifications" %}
                </h1>
            </div>
            <div id="permissionDenied" class="p-1" style="display: none">
                <h1>
                    {% translate "we cannot send you web notifications, because your settings do not allow that" %}
                </h1>
            </div>
        </div>
    </div>
    <script src="{% static "webpush/webpush.min.js" %}"></script>
{% endblock body %}