<div>
	{% if limits.upgrade_url %}
	<div class="upgrade-message padding" style="border-bottom: 1px solid #d0d8dc;">
		{% if limits.expiry %}
			<h4>{{ __("You have {0} days left in your subscription", [days_to_expiry]) }}</h4>
		{% else %}
			<h4>{{ __("You have subscribed for one user free plan") }}</h4>
		{% endif %}

		<p>Upgrade to a premium plan with more users, storage and priority support.</p>
		<button class="btn btn-primary btn-sm primary-action">Upgrade</button>
	</div>
	{% endif %}

	{% if limits.users %}
	    {% var users_percent = ((enabled_users / limits.users) * 100); %}
	<div class="usage-info-section" style="margin: 30px;">
		<h4>{{ __("Users") }}</h4>

		<div class="progress" style="margin-bottom: 0;">
			<div class="progress-bar progress-bar-{%= (users_percent < 75 ? "success" : "warning") %}" style="width: {{ users_percent }}%">
			</div>
		</div>

		<p>{%= enabled_users %} out of {%= limits.users %} enabled</p>
	</div>
	{% endif %}

	{% if limits.emails %}
	<div class="usage-info-section" style="margin: 30px;">
	    <h4>{{ __("Emails") }}</h4>

	    {% var email_percent = (( emails_sent / limits.emails ) * 100); %}
	    {% var emails_remaining = (limits.emails - emails_sent) %}

	    <div class="progress" style="margin-bottom: 0;">
	        <div class="progress-bar progress-bar-{%= (email_percent < 75 ? "success" : "warning") %}" style="width: {{ email_percent }}%">
	        </div>
	    </div>

		<p>{%= emails_sent %} out of {%= limits.emails %} sent this month</p>
	</div>
	{% endif %}

	{% if limits.space %}
	<div class="usage-info-section" style="margin: 30px;">
	    <h4>{{ __("Space") }}</h4>

	    {% var database_percent = ((limits.space_usage.database_size / limits.space) * 100); %}
	    {% var files_percent = ((limits.space_usage.files_size / limits.space) * 100); %}
	    {% var backup_percent = ((limits.space_usage.backup_size / limits.space) * 100); %}

	    <div class="progress" style="margin-bottom: 0;">
	        <div class="progress-bar" style="width: {%= database_percent %}%; background-color: #5e64ff"></div>
	        <div class="progress-bar" style="width: {%= files_percent %}%; background-color: #743ee2"></div>
	        <div class="progress-bar" style="width: {%= backup_percent %}%; background-color: #7CD6FD"></div>
	    </div>

		<span class="indicator blue" style="margin-right: 20px;">
			{{ __("Database Size:") }} {%= limits.space_usage.files_size %} MB
		</span>
		<span class="indicator purple" style="margin-right: 20px;">
			{{ __("Files Size:") }} {%= limits.space_usage.files_size %} MB
		</span>
		<span class="indicator lightblue" style="margin-right: 20px;">
			{{ __("Backup Size:") }} {%= limits.space_usage.backup_size %} MB
		</span>

		<p>
			<span class="{%= ((limits.space - limits.space_usage.total) > 50) ? "" : "text-warning" %}">
	                    <b>{%= flt(limits.space - limits.space_usage.total, 2) %} MB</b></span>
			available out of
			<span><b>{%= limits.space %} MB</b></span>
		</p>
	</div>
	{% endif %}
</div>
