<form id="hey-activate" class="card bg-dark shadow mb-3">
    <div class="card-header">
    	<%- config.userHasSubscribed ? lang['Activated'] : lang['Not Activated'] %>
    </div>
    <div class="card-body" style="min-height:auto">
        <div class="form-group">
        	<input name="subscriptionId" tabindex="2" class="form-control wide-text" placeholder="License Key / Subscription ID">
        </div>
        <div class="form-group mb-0">
        	<button class="btn btn-sm btn-round btn-block btn-success" type="submit"><%- lang.Save %></button>
        </div>
    </div>
</form>
<!-- <style>
    #hey-activate {
        left: 0;
        right: 0;
        margin: auto;
        position: fixed;
        max-width: 400px;
        padding: 20px;
        background: rgba(0,0,0,0.7);
        border-radius: 10px;
        box-shadow: 0 0 10px #333;
    }
</style> -->
<script>
    $(document).ready(function(){
        var heyActivateCard = $('#hey-activate')
        var heyActivateCardSubmit = heyActivateCard.find('[type="submit"]')
        heyActivateCard.submit(function(e){
            e.preventDefault()
            var formValues = $(this).serializeObject()
            heyActivateCardSubmit.html(`<i class="fa fa-spinner fa-pulse"></i>`)
            $.post(superApiPrefix + $user.sessionKey + '/system/activate',{
                subscriptionId: formValues.subscriptionId
            },function(data){
                var noticeTitle = lang['Not Activated']
                var noticeText = data.msg || lang.notActivatedText
                var noticeType = 'warning'
                if(data.ok){
                    noticeTitle = lang.Activated
                    noticeText = lang.activatedText
                    noticeType = 'success'
                    heyActivateCard.find('[name="subscriptionId"]').val('')
                }else{
                    heyActivateCardSubmit.html(lang.Save)
                }
                heyActivateCard.find('.card-header').html(noticeTitle)
                new PNotify({
                    title: noticeTitle,
                    text: noticeText,
                    type: noticeType
                })
            })
            return false
        })
    })
</script>
