<div class="row">
    <div class="col-md-12">
        <h1><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Account</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-12">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            {{> accountmenu}}
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="overview">

                <p>&nbsp;</p>

                <div class="row">
                    <div class="col-md-8">

                        <div class="form-group">
                            <label class="control-label">Address</label>
                            <div class="input-group">
                                <p class="form-control-static">
                                    <a href="mailto:{{address}}">{{address}}</a>
                                </p>
                            </div>
                        </div>

                        <div class="form-group ">
                            <div class="input-group ">
                                <button type="button" id="reg-proto" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Register {{serviceName}} as default webmail handler</button>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="control-label ">Quota</label>
                            <div class="input-group ">
                                <p class="form-control-static ">
                                    Used <strong>{{storageUsed}}</strong> of <strong>{{quota}}</strong>
                                </p>
                            </div>
                        </div>

                        <div class="progress ">
                            <div class="progress-bar " role="progressbar " aria-valuenow=" {{storageOverview}} " aria-valuemin="0 " aria-valuemax="100 " style="min-width: 2em; ">
                                {{storageOverview}}%
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="control-label ">Messages sent</label>
                            <div class="input-group ">
                                <p class="form-control-static ">
                                    Sent <strong>{{recipientsSent}}</strong> messages, daily allowed quota <strong>{{recipients}}</strong> messages
                                </p>
                            </div>
                        </div>

                        <div class="progress ">
                            <div class="progress-bar " role="progressbar " aria-valuenow=" {{recipientsOverview}} " aria-valuemin="0 " aria-valuemax="100 " style="min-width: 2em; ">
                                {{recipientsOverview}}%
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="control-label ">Forwarded messages</label>
                            <div class="input-group ">
                                <p class="form-control-static ">
                                    Forwarded <strong>{{forwardsSent}}</strong> messages, daily allowed quota <strong>{{forwards}}</strong> messages
                                </p>
                            </div>
                        </div>

                        <div class="progress ">
                            <div class="progress-bar " role="progressbar " aria-valuenow=" {{forwardsOverview}} " aria-valuemin="0 " aria-valuemax="100 " style="min-width: 2em; ">
                                {{forwardsOverview}}%
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<input type="hidden" id="service-name" value="{{serviceName}}" />
<script>
    function registerMailClient(){
        var origin = window.location.origin;

        if (!origin) {
            origin= window.location.protocol + '//' + window.location.hostname + (window.location.port ? (':' + window.location.port) : '');
        }

        navigator.registerProtocolHandler('mailto', origin + '/webmail/send?to=%s', document.getElementById('service-name').value);
    }
    document.getElementById('reg-proto').addEventListener('click', registerMailClient, false);

</script>
