<div id="detail_{{ object.id }}" class="detail box ui-draggable ui-droppable expanded expanded-padding">
    <div class="box-header">
        <div class="box-name ui-draggable-handle">
            <i class="fa fa-fw fa-search"></i>
            <span>Details of subscription {{ object.name }}</span>
        </div>
        <div class="box-icons">
            <a class="collapse-link">
                <i class="fa fa-chevron-up"></i>
            </a>
            <a class="expand-link">
                <i class="fa fa-expand"></i>
            </a>
            <a class="close-link">
                <i class="fa fa-times"></i>
            </a>
        </div>
        <div class="no-move"></div>
    </div>

    <div class="box-content">
        <div id="details-content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-8">

                        <div class="panel panel-primary">

                            <div class="panel-heading">Your subscription</div>

                            <div class="panel-body">
                                <h4 class="page-header">Your subscription</h4>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Subscription category</label>
                                    <div class="col-sm-9 value">{{ subscription.category.label.capitalize }}</div>
                                </div>
                                {% if subscription.referrer %}
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Referrer</label>
                                    <div class="col-sm-9 value">{{ subscription.referrer }}</div>
                                </div>
                                {% endif %}
                            </div>

                            <table class="table">
                                <caption><h4 class="page-header">Modules selected</h4></caption>
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Monthly cost</th>
                                        <th>Yearly cost</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for module in subscription.modules.all %}
                                    {% if module.monthly_price > 0 %}
                                    <tr>
                                        <td>{{ label }}</td>
                                        <td>{{ module.monthly_price }} €</td>
                                        <td>{{ module.yearly_price }} €</td>
                                    </tr>
                                    {% endif %}
                                    {% endfor %}
                                </tbody>
                            </table>

                            <div class="panel-footer">
                                To change details of your subscription, please contact us. last modified, et tout çà.
                            </div>

                        </div>

                    </div>
                    <div class="col-sm-4">

                        <div class="panel panel-primary">

                            <div class="panel-heading">Assigned users</div>

                            <div class="panel-body">

                                <h4 class="page-header">Subscription owner</h4>
                                <div class="form-group">
                                    <label class="col-sm-5 control-label">First name</label>
                                    <div class="col-sm-7 value">
                                        {{ subscription.owner.first_name }}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-5 control-label">Last name</label>
                                    <div class="col-sm-7 value">
                                        {{ subscription.owner.last_name }}
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-5 control-label">Email</label>
                                    <div class="col-sm-7 value">
                                        {{ subscription.owner.email }}
                                    </div>
                                </div>
                                {% if subscription.company_name %}
                                <div class="form-group">
                                    <label class="col-sm-5 control-label">On behalf of company</label>
                                    <div class="col-sm-7 value">{{ subscription.company_name }}</div>
                                </div>
                                {% endif %}
                            </div>

                            <table class="table">
                                <caption><h4 class="page-header">Access accounts</h4></caption>
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Role</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for account in subscription.saas_access_account_set.all %}
                                    <tr>
                                        <td>{{ account.user.profile.label }}</td>
                                        <td>{{ account.user.username }}</td>
                                        <td>{{ account.role.label }}</td>
                                        <td>{% if account.status.label == "created" %}
                                            <button type="button" class="btn btn-primary btn-label-left"><span><i class="fa fa-fw fa-sign-in"></i></span>Created</button>
                                            {% elif account.status.label == "activated" %}
                                            <button type="button" class="btn btn-info btn-label-left"><span><i class="fa fa-fw fa-asterisk"></i></span>Activated</button>
                                            {% elif account.status.label == "ongoing" %}
                                            <button type="button" class="btn btn-success btn-label-left"><span><i class="fa fa-fw fa-thumbs-o-up"></i></span>Ongoing</button>
                                            {% elif account.status.label == "suspended" %}
                                            <button type="button" class="btn btn-info btn-label-left"><span><i class="fa fa-fw fa-asterisk"></i></span>Suspended</button>
                                            {% elif account.status.label == "terminated" %}
                                            <button type="button" class="btn btn-danger btn-label-left"><span><i class="fa fa-fw fa-question"></i></span>Terminated</button>
                                            {% else %}
                                            <button type="button" class="btn btn-default btn-label-left"><span><i class="fa fa-fw fa-question"></i></span>{{ account.status }}</button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="panel-footer">
                                <form method="post" class="form-inline add_access_account" role="form" action="{% url 'saas:send_invitation' %}"">
                                    {% csrf_token %}
                                    <input type="hidden" name="invitation-subscription" value="{{ subscription.pk }}" />
                                    <div class="form-group">
                                        <label for="invitation-email">Email</label>
                                        <input type="email" class="form-control" id="invitation-email" name="invitation-email" placeholder="Guest email">
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-label-left"><span><i class="fa fa-fw fa-send"></i></span>Send invitation</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>