{% extends "advantage/base_advantage.html" %}

{% block title %}Ubuntu Advantage - Magic Attach{% endblock %}
{% block meta_description %}Magically attach devices with your {% endblock %}

{% block content %}
<section class="u-fixed-width vh-75 d-flex">

    {% if 'success' in status %}
    <div class="p-notification--positive m-auto w-50" id="notification-success">
        <div class="p-notification__content">
            <h5 class="p-notification__title">Success</h5>
            <p class="p-notification__message">Successfully Attached Machine</p>
        </div>
        <div class="p-notification__meta">
            <div class="p-notification__actions">
                <a class="p-notification__action"><button onclick="history.back()"> Try another code</button></a>
                <a class="p-notification__action" href="/pro/dashboard"><button>Your Subscriptions</button></a>
            </div>
        </div>
    </div>
    {% else %}
    <div class="p-notification--negative m-auto w-100" id="notification-error">
        <div class="p-notification__content">
            <h5 class="p-notification__title">{{status.code}}</h5>
            <p class="p-notification__message">{{status.message}}</p>
        </div>
        <div class="p-notification__meta">
            <div class="p-notification__actions">
                <a class="p-notification__action"><button onclick="history.back()"> Try another code</button></a>
                <a class="p-notification__action" href="/pro/dashboard"><button>Your Subscriptions</button></a>
            </div>
        </div>
    </div>
    {% endif %}
</section>
<style>
    .vh-75 {
        height: 75vh;
    }

    .d-flex {
        display: flex;
    }

    .m-auto {
        margin: auto;
    }

    .w-100 {
        width: 100%;
    }
</style>
{% endblock %}