<div class="np-grid-spacing col-xs-12 col-sm-5 col-md-4 col-lg-3 profile-card-container">
	<div class="profile-card-wrapper">
		<div class="profile-card">
			<div	class="profile-bio">
				<img
					alt="{{ current_person.name }}"
					class="np-header-avatar-image"
					src="{{ current_person.avatar_url }}"
					style="
					height: 102px;
					margin-bottom: 23px;
					width: 102px;"
				/>
				{%- comment -%} <div class="profile-bio-header">
					Account Details
				</div> {%- endcomment -%}
				<span class="profile-bio-name">{{ current_person.first_name }} {{current_person.last_name}}</span>
				<span class="profile-bio-email">{{ current_person.email }}</span>

				{% unless current_school.sso_active? %}
					<a
						class="profile-bio-account-settings-button"
						href="{% route account %}"
					>
						Edit Profile
					</a>
				{% endunless %}
			</div>
			
		</div>
	</div>

	<div class="product-subscriptions-card-wrapper">
		<div class="product-subscriptions-card">
			{% assign sub_levels_length = current_person.properties.subscription_levels | size %}
			{% if sub_levels_length > 0 %}
				<div class="product-subscriptions-container">
					<div class="product-subscriptions-banner">
						<span class="subscription-name" style="border: none;">
							Product Subscriptions
						</span>
						{%- comment -%} <span class="subscription-level">
							PLAN
						</span> {%- endcomment -%}
					</div>
					<ul class="product-subscriptions">
						{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
						
						{% assign essentials_found_flag = false %}
						{% for subscription_level in subscription_levels %}
						{% assign name_level_pair = subscription_level | split: ":"%}
							{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
							{% if product_sub_level contains 'Essential' %}
								{% assign essentials_found_flag = true %}
							{% endif %}
						{% endfor %}

						{% if essentials_found_flag %}
							<div class="product-subscription-level-header">
								Essential
							</div>
							<div style="background: #795CA0; height: 3px; margin: 5px; width: 20px;"></div>
						{% endif %}

						{% for subscription_level in subscription_levels %}
						{% assign name_level_pair = subscription_level | split: ":"%}
							{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
							
							{% if product_sub_level contains 'Essential' %}
								<li class="product-subscription">
									{% include "profile_logo_calculator", product: name_level_pair[0] %}
									{%- comment -%} <span class="subscription-name">
										{{ name_level_pair[0] }}
									</span> {%- endcomment -%}
									{%- comment -%} <span class="subscription-level">
										{{ name_level_pair[1] }}
									</span> {%- endcomment -%}
										{%- comment -%} {% if '{{name_level_pair[1]}}' == 'ESS' %}
											Essential
										{% elsif '{{name_level_pair[1]}}' == 'ENH' %}
											Enhanced
										{% elsif '{{name_level_pair[1]}}' == 'ENH+' %}
											Enhanced Plus
										{% endif %} {%- endcomment -%}
								</li>
							{% endif %}
						{% endfor %}

						{% assign enhanced_found_flag = false %}
						{% for subscription_level in subscription_levels %}
						{% assign name_level_pair = subscription_level | split: ":"%}
							{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
							{% if product_sub_level contains 'Enhanced' %}
								{% unless product_sub_level contains 'Enhanced+' %}
									{% assign enhanced_found_flag = true %}
								{% endunless %}
							{% endif %}
						{% endfor %}

						{% if enhanced_found_flag %}
							<div class="product-subscription-level-header" style="margin-top: 20px;">
								Enhanced
							</div>
							<div style="background: #49A9E1; height: 3px; margin: 5px; width: 20px;"></div>
						{% endif %}

						{% for subscription_level in subscription_levels %}
							{% assign name_level_pair = subscription_level | split: ":"%}
							{% assign product_sub_level = name_level_pair | slice: 1 | strip %}

							{% if product_sub_level contains 'Enhanced' %}
								{% unless product_sub_level contains 'Enhanced+' %}
								<li class="product-subscription">
										{% include "profile_logo_calculator", product: name_level_pair[0] %}
										{%- comment -%} <span class="subscription-name">
											{{ name_level_pair[0] }}
										</span> {%- endcomment -%}
										{%- comment -%} <span class="subscription-level">
											{{ name_level_pair[1] }}
										</span> {%- endcomment -%}
											{%- comment -%} {% if '{{name_level_pair[1]}}' == 'ESS' %}
												Essential
											{% elsif '{{name_level_pair[1]}}' == 'ENH' %}
												Enhanced
											{% elsif '{{name_level_pair[1]}}' == 'ENH+' %}
												Enhanced Plus
											{% endif %} {%- endcomment -%}
									</li>
								{% endunless %}
							{% endif %}
						{% endfor %}

						{% assign enhanced_plus_found_flag = false %}
						{% for subscription_level in subscription_levels %}
						{% assign name_level_pair = subscription_level | split: ":"%}
							{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
							{% if product_sub_level contains 'Enhanced+' %}
								{% assign enhanced_plus_found_flag = true %}
							{% endif %}
						{% endfor %}

						{% if enhanced_plus_found_flag %}
							<div class="product-subscription-level-header" style="margin-top: 20px;">
								Enhanced Plus
							</div>
							<div style="background: #E26B37; height: 3px; margin: 5px; width: 20px;"></div>
						{% endif %}

						{% for subscription_level in subscription_levels %}
						{% assign name_level_pair = subscription_level | split: ":"%}
							{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
							
							{% if product_sub_level contains 'Enhanced+' %}
								<li class="product-subscription">
									{% include "profile_logo_calculator", product: name_level_pair[0] %}
									{%- comment -%} <span class="subscription-name">
										{{ name_level_pair[0] }}
									</span> {%- endcomment -%}
									{%- comment -%} <span class="subscription-level">
										{{ name_level_pair[1] }}
									</span> {%- endcomment -%}
										{%- comment -%} {% if '{{name_level_pair[1]}}' == 'ESS' %}
											Essential
										{% elsif '{{name_level_pair[1]}}' == 'ENH' %}
											Enhanced
										{% elsif '{{name_level_pair[1]}}' == 'ENH+' %}
											Enhanced Plus
										{% endif %} {%- endcomment -%}
								</li>
							{% endif %}
						{% endfor %}
					</ul>
				</div>
			{% endif %}
		</div>
	</div>
</div>

<style>
	.profile-card-container{
		margin-bottom: 45px;
	}
	
	/* .profile-card-wrapper{
		background: #AA7FB8;
		border: 1px solid #EFEFEF;
		padding-top: 14px;
	} */

	.profile-card{
		background: #FFF;
    border: 1px solid #f2f4f5;
    box-shadow: 0 3px 5px rgba(0,0,0,.1);
		margin-bottom: 25px;
		/* padding: 12px; 
		padding-bottom: 32px; */
		padding: 45px 0;
		width: 100%;
	}

	.profile-bio{
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.profile-bio-header{
		border-bottom: 1px solid #D9D9D9;
		font-size: 18px; 
		font-weight: 700; 
		line-height: 25px;
		margin-bottom: 12px;
    padding-bottom: 8px;
    text-align: center;
    width: 75%;
	}

	.profile-bio-name,
	.profile-bio-email{
		line-height: 25px;
		text-align: center;
	}

	.profile-bio-name{
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 12px;
	}

	.profile-bio-email{
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 35px;
	}

	.profile-bio-account-settings-button{
    background-color: #aa7fb8;
    border-radius: 25px;
		color: #FFF;
    font-weight: 400;
    line-height: 1;
    margin: 20px 30px;
    padding: 12px 18px 12px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: .3s ease all;
	}

	.product-subscriptions-card{
		border: 1px solid #f2f4f5;
		box-shadow: 0 3px 5px rgba(0,0,0,.1);
	}

	.product-subscriptions-banner{
		align-items: center;
		/* background: #EAEAEA; */
		border-bottom: 1px solid #f2f4f5;
		display: flex;
		/* font-size: 14px;
		font-weight: 400; */
		font-size: 16px;
		font-weight: 600;
		height: 55px;
		justify-content: center;
		/* line-height: 25px; */
	}

	.product-subscriptions{
    align-items: center;
		display: flex;
    flex-direction: column;
    justify-content: center;
		padding: 0;
	}

	.product-subscription-level-header{
		color: #595959;
		font-size: 1em;
    /* margin-bottom: 10px; */
	}

	.product-subscription{
		align-items: center;
		display: flex;
		flex-direction: row;
		height: 35px;
		justify-content: space-between;
	}

	.subscription-name{
    /* align-items: center;
    border-right: 2px solid #EAEAEA;
    display: flex;
    height: 25px; */
		margin: 3px 0;
	}

	.profile-card-product-logo{
		height: 1.25em;
	}

	/* .subscription-level{
    align-items: center;
    display: flex;
    height: 100%;
    padding-left: 10px;
		width: 30%;
	} */

	@media screen and (min-width: 768px){
		.profile-card-container{
			padding: 0;
			padding-right: 3%;
		}
	}
</style>
