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

{% block title %}OceanExpert - A Directory of Marine and Freshwater Professionals{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/social-buttons.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/google-fonts.css') }}">
{% endblock %}

{% block body %}
    {% include('navbarlogin.html.twig') %}
    <style type="text/css">
        .content-page{padding-top: 100px; min-height: 67vh;}
    </style>
    <div class="container content-page">
        <div class="row">
            <div class="col-lg-12">
                {% if error is defined and error != '' %}
                    <div class="alert alert-danger">
                        <h4><i class="fa fa-exclamation-triangle fa-pull-left fa-fw" aria-hidden="true"></i> Something went wrong!</h4>
                        {{error}}<br />
                    </div>
                    <button type="submit" class="btn btn-primary">Home</button>
                {% elseif success is defined and success != '' %}
                    <div class="alert alert-success">
                        <h4><i class="fa fa-check-circle fa-pull-left fa-fw" aria-hidden="true"></i> Email Subscription</h4>
                        {{success}}<br />
                    </div>
                    <a type="submit" class="btn btn-primary" href="{{ path('frontend_homepage') }}"> Back to Home</a>

                {% else %}
                    <legend>Dear {{ fname ~ ' ' ~ sname }}, we are sorry that you want to unsubscribe.</legend>
                    <form class="form" method="post">
                        <div class="form-group col-md-4">
                            <label for="email">Email address</label>
                            <input type="email" class="form-control" id="email" readonly placeholder="Email" value="{{ email }}">
                        </div>
                        <div class="checkbox icheck">
                            <label>
                                <input type="checkbox" id="status" name="status" value="1" {% if subscribed is defined and subscribed == 1 %}checked{% endif %}/>
                                Unsubscribe from receiving e-mails and information from OceanExpert/IODE (You can also change your email preferences in your Profile Settings)
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Unsubscribe Me!!</button>
                    </form>

                {% endif %}
            </div>
        </div>
    </div>
    {% include('footer.html.twig') %}
    <script type="text/javascript">
        $("#status").iCheck({
            checkboxClass: 'icheckbox_square-blue',
            increaseArea: '20%'
        });
    </script>
{% endblock %}