{% extends "::layout_profile.html.twig" %}
{% trans_default_domain 'FOSUserBundle' %}
{% block fos_user_content %}






	<!-- start: DASHBOARD TITLE -->
	<section id="page-title" class="padding-top-15 padding-bottom-15">
		<div class="row">
			<div class="col-md-12">
				<div role="alert" class="alert alert-success">
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<strong>Well done!</strong> {{ 'registration.confirmed'|trans({'%username%': user.username}) }}
				</div>
				{% if targetUrl %}
					<p><a href="{{ targetUrl }}">{{ 'registration.back'|trans }}</a></p>
				{% endif %}
			</div>

		</div>
	</section>

	{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_EDITOR') %}
		<!-- end: DASHBOARD TITLE -->
		<div class="container-fluid container-fullw padding-bottom-10">
			<div class="row">
				<div class="col-md-12">

					<div class="title" style="font-size: 46px;font-weight: 500;line-height: 1.2; padding: 10px;text-align: center;margin-top: 20px;">How it works for « Editor » ?</div>
					<p style="font-size: 20px; font-weight: 100;text-align: center; padding-right: 93px;padding-left: 93px;">We help you to manage your artciles with an easy and simple using the different interfaces of the site. Here are 4 steps that can change your life!</p>
					<div class="row steps" style="    margin-top: 70px;margin-bottom: 70px;">
						<div class="col-sm-3"><img alt="etape 1" src="{{ asset('assets_front/images/dashbord.png')}}"><p>Manage and approving the different articles</p>
						</div>
						<div class="col-sm-3"><img alt="etape 2" src="{{ asset('assets_front/images/editor-2.png')}}"><p>Invite the reviewer to reviewing the article</p>
						</div>
						<div class="col-sm-3"><img alt="etape 3" src="{{ asset('assets_front/images/editor-3.png')}}"><p>Approving the articles whith rating reviewer  </p>
						</div>
						<div class="col-sm-3"><img alt="etape 4" src="{{ asset('assets_front/images/editor-4.png')}}"><p>Publishing the articles </p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
{% endif %}
<div  class="container-fluid container-fullw padding-bottom-10">
    <div class="row">
            <div class="col-md-12">
			
					<div class="title" style="font-size: 46px;font-weight: 500;line-height: 1.2; padding: 10px;text-align: center;margin-top: 20px;">How it works ?</div>
					<p style="font-size: 20px; font-weight: 100;text-align: center; padding-right: 93px;padding-left: 93px;">We help you create and review your artciles with an easy and simple using the different interfaces of the site.</p>
					<div class="row steps" style="    margin-top: 70px;margin-bottom: 70px;">

					<div class="col-sm-3"><img alt="etape 1" src="{{ asset('assets_front/images/dashbord.png')}}"><p>this is a dashbord to manage your articles </p>
					</div>
					<div class="col-sm-3"><img alt="etape 2" src="{{ asset('assets_front/images/step-2.png')}}"><p>Invite the co-authors to write the article together</p>
					</div>
					<div class="col-sm-3"><img alt="etape 3" src="{{ asset('assets_front/images/etape-3.png')}}"><p>Write your article</p>
					</div>
					<div class="col-sm-3"><img alt="etape 4" src="{{ asset('assets_front/images/etape-4.png')}}"><p>Reviewing the other article and rating them</p>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock fos_user_content %}