<div class="sidebar-footer col-12">
	<!-- <div class="sidebar-footer d-flex justify-content-around">
		<a class="option vl" href="#">
			<i class="material-icons style-icon">mode_comment</i>
			Glossary
		</a>
		<a class="option vl" href="#"><i class="fa fa-book style-icon"></i>Guide</a>
		<a class="option" href="#"><i class="fa fa-life-ring style-icon"></i>Help</a>
	</div> -->
	<div class="row d-flex flex-reverse">
		<div class="col-6 text-center">
			<p class="option" (click)="openGlossaryDialog()" [ngClass]="{'option-active': this.router.url === '/glossary'}">
				<!-- <i class="fa fa-book pr-2 pt-1"></i> -->
				{{'FOOTER.GLOSSARY' | translate}}</p>
		</div>
		<div class="col-6 text-center">
			<p class="option" (click)="openFaqDialog()" [ngClass]="{'option-active': this.router.url === '/faq'}">
				<!-- <i class="fa fa-question-circle pr-2 pt-1"></i> -->
				{{'FOOTER.FAQ' | translate}}</p>
		</div>
	</div>
	<div class="row d-flex flex-reverse">
		<div *ngIf="isAuthenticated()" class="col-6 text-center">
			<p class="option" (click)="openContactDialog()" [ngClass]="{'option-active': this.router.url === '/contact-support'}">
				<!-- <i class="fa fa-envelope-open pr-2 pt-1"></i> -->
				{{'FOOTER.CONTACT-SUPPORT' | translate}}</p>
		</div>
		<div class="col-6 text-center">
			<a class="option" [routerLink]="['/terms-of-service']" [routerLinkActive]="['option-active']">
				<!-- <i class="fa fa-balance-scale pr-2 pt-1"></i> -->
				{{'FOOTER.TERMS-OF-SERVICE' | translate}}</a>
		</div>
		<!-- <div class="col-auto text-center">
			<a class="option" [routerLink]="['/privacy-policy']" [routerLinkActive]="['option-active']">
				<i class="fa fa-user-secret pr-2 pt-1"></i>
				{{'FOOTER.PRIVACY-POLICY' | translate}}</a>
		</div> -->
	</div>
</div>
