<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Welcome!{% endblock %} - Little Printer</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('base.css') }}">
<link rel="stylesheet" href="{{ asset('tailwind.css') }}">
<link rel="stylesheet" href="{{ asset('components.css') }}">
{# {{ encore_entry_link_tags('app') }} #}
{% endblock %}
{% block javascripts %}
<script src="https://unpkg.com/flowbite@1.4.7/dist/flowbite.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/phosphor-icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.js"></script>
{# {{ encore_entry_script_tags('app') }} #}
{% endblock %}
</head>
<body>
<header class="header">
<div class="header-content responsive-wrapper">
<div class="header-logo">
<img class="object-contain h-12" src="{{ asset('img/lp-logo.png') }}" />
{# <a href="{{ path('app_homepage') }}">
<div>
</div>
<h1>Little Printer</h1>
</a> #}
{# <div class="printer-title">
<span class="block"></span>
<h1>Little Printer<span></span></h1>
</div> #}
</div>
<div class="header-navigation">
<nav class="header-navigation-links">
{% if is_granted('ROLE_USER') == false %}
<a href="{{ path('app_homepage') }}" class="{% if (app.request.get('_route') == 'app_homepage') %}active{% endif %}"> Home </a>
{% endif %}
<a href="{{ path('app_dashboard') }}" class="{% if (app.request.get('_route') == 'app_dashboard') %}active{% endif %}"> Dashboard </a>
<a href="{{ path('app_contact') }}" class="{% if (app.request.get('_route') == 'app_contact') %}active{% endif %}"> Contact </a>
</nav>
<div class="header-navigation-actions">
{# <a href="#" class="button">
<i class="ph-lightning-bold"></i>
<span>Upgrade now</span>
</a> #}
{% if is_granted('ROLE_ADMIN') %}
<a href="{{ path('app_admin') }}" class="icon-button">
<i class="ph-gear-bold"></i>
</a>
{% endif %}
{% if is_granted('ROLE_USER') %}
<a href="#" onclick="notificationHandler()" class="icon-button">
<i class="ph-bell-bold"></i>
</a>
<a href="{{ path('app_logout') }}" class="icon-button">
<i class="ph-sign-out-bold"></i>
</a>
<a href="{{ path('app_profile') }}" class="avatar">
{% if app.user.avatar is defined %}
<img src="{{ asset(app.request.getBaseURL() ~ "/user/avatar/" ~ app.user.avatar) }}" alt="{{ app.user.email }}" class="object-cover w-full h-full" />
{% else %}
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="{{ app.user.email }}" class="object-cover w-full w-full" />
{% endif %}
</a>
{% else %}
<a href="{{ path('app_login') }}" class="button">
<i class="ph-lightning-bold"></i>
<span>Login</span>
</a>
{% endif %}
</div>
</div>
<a href="#" class="button">
<i class="ph-list-bold"></i>
<span>Menu</span>
</a>
</div>
</header>
<main class="main">
<div class="responsive-wrapper">
{% set items = [{'title':'Home','link':path('app_homepage')}] %}
{% block breadcrumbs %}
{% include 'breadcrumbs.html.twig' with items %}
{% endblock %}
<div class="main-header">
<h1>{% block pagetitle %}Settings{% endblock %}</h1>
{# <div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div> #}
</div>
{% block body %}{% endblock %}
{% block scripts %}{% endblock %}
</div>
<div class="hidden w-full h-full bg-gray-400 bg-opacity-90 top-0 overflow-y-auto overflow-x-hidden fixed sticky-0" id="chec-div">
<div class="w-full absolute z-10 right-0 h-full overflow-x-hidden transform translate-x-0 transition ease-in-out duration-700" id="notification">
<div class="2xl:w-4/12 bg-gray-50 h-screen overflow-y-auto p-8 absolute right-0">
<div class="flex items-center justify-between">
<p tabindex="0" class="focus:outline-none text-2xl font-semibold leading-6 text-gray-800">Notifications</p>
<button role="button" aria-label="close modal" class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-md cursor-pointer" onclick="notificationHandler(false)">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg1.svg" alt="icon" />
</button>
</div>
<div class="w-full p-3 mt-8 bg-white rounded flex">
<div tabindex="0" aria-label="heart icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-gray-200 flex items-center justify-center">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg2.svg" alt="icon"/>
</div>
<div class="pl-3">
<p tabindex="0" class="focus:outline-none text-sm leading-none"><span class="text-indigo-700">James Doe</span> favourited an <span class="text-indigo-700">item</span></p>
<p tabindex="0" class="focus:outline-none text-xs leading-3 pt-1 text-gray-500">2 hours ago</p>
</div>
</div>
<div class="w-full p-3 mt-4 bg-white rounded shadow flex flex-shrink-0">
<div tabindex="0" aria-label="group icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-gray-200 flex flex-shrink-0 items-center justify-center">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg3.svg" alt="icon"/>
</div>
<div class="pl-3 w-full">
<div class="flex items-center justify-between w-full">
<p tabindex="0" class="focus:outline-none text-sm leading-none"><span class="text-indigo-700">Sash</span> added you to the group: <span class="text-indigo-700">UX Designers</span></p>
<div tabindex="0" aria-label="close icon" role="button" class="focus:outline-none cursor-pointer">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg4.svg" alt="icon"/>
</div>
</div>
<p tabindex="0" class="focus:outline-none text-xs leading-3 pt-1 text-gray-500">2 hours ago</p>
</div>
</div>
<div class="w-full p-3 mt-4 bg-white rounded flex">
<div tabindex="0" aria-label="post icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-gray-200 flex items-center justify-center">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg5.svg" alt="icon"/>
</div>
<div class="pl-3">
<p tabindex="0" class="focus:outline-none text-sm leading-none"><span class="text-indigo-700">Sarah</span> posted in the thread: <span class="text-indigo-700">Update gone wrong</span></p>
<p tabindex="0" class="focus:outline-none text-xs leading-3 pt-1 text-gray-500">2 hours ago</p>
</div>
</div>
<div class="w-full p-3 mt-4 bg-red-100 rounded flex items-center">
<div tabindex="0" aria-label="storage icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-red-200 flex items-center flex-shrink-0 justify-center">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg6.svg" alt="icon"/>
</div>
<div class="pl-3 w-full flex items-center justify-between">
<p tabindex="0" class="focus:outline-none text-sm leading-none text-red-700">Low on storage: 2.5/32gb remaining</p>
<p tabindex="0" class="focus:outline-none text-xs leading-3 cursor-pointer underline text-right text-red-700">Manage</p>
</div>
</div>
<div class="w-full p-3 mt-4 bg-white rounded flex">
<div tabindex="0" aria-label="loading icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-gray-200 flex items-center justify-center">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg7.svg" alt="icon"/>
</div>
<div class="pl-3">
<p tabindex="0" class="focus:outline-none text-sm leading-none">Shipmet delayed for order<span class="text-indigo-700"> #25551</span></p>
<p tabindex="0" class="focus:outline-none text-xs leading-3 pt-1 text-gray-500">2 hours ago</p>
</div>
</div>
<h2 tabindex="0" class="focus:outline-none text-sm leading-normal pt-8 border-b pb-2 border-gray-300 text-gray-600">YESTERDAY</h2>
<div class="w-full p-3 mt-6 bg-white rounded flex">
<div tabindex="0" aria-label="post icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-gray-200 flex items-center justify-center">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg8.svg" alt="icon"/>
</div>
<div class="pl-3">
<p tabindex="0" class="focus:outline-none text-sm leading-none"><span class="text-indigo-700">Sarah</span> posted in the thread: <span class="text-indigo-700">Update gone wrong</span></p>
<p tabindex="0" class="focus:outline-none text-xs leading-3 pt-1 text-gray-500">2 hours ago</p>
</div>
</div>
<div class="w-full p-3 mt-4 bg-white rounded flex">
<div tabindex="0" aria-label="loading icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-gray-200 flex items-center justify-center">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg9.svg" alt="icon"/>
</div>
<div class="pl-3">
<p tabindex="0" class="focus:outline-none text-sm leading-none">Shipmet delayed for order<span class="text-indigo-700"> #25551</span></p>
<p tabindex="0" class="focus:outline-none text-xs leading-3 pt-1 text-gray-500">2 hours ago</p>
</div>
</div>
<div class="w-full p-3 mt-4 bg-white rounded flex">
<div tabindex="0" aria-label="heart icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-gray-200 flex items-center justify-center">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg10.svg" alt="icon"/>
</div>
<div class="pl-3">
<p tabindex="0" class="focus:outline-none text-sm leading-none"><span class="text-indigo-700">James Doe</span> favourited an <span class="text-indigo-700">item</span></p>
<p tabindex="0" class="focus:outline-none text-xs leading-3 pt-1 text-gray-500">2 hours ago</p>
</div>
</div>
<div class="w-full p-3 mt-8 bg-green-100 rounded flex items-center">
<div tabindex="0" aria-label="success icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-green-200 flex flex-shrink-0 items-center justify-center">
<img src="https://tuk-cdn.s3.amazonaws.com/can-uploader/notification_1-svg11.svg" alt="icon"/>
</div>
<div class="pl-3 w-full">
<div class="flex items-center justify-between">
<p tabindex="0" class="focus:outline-none text-sm leading-none text-green-700">Design sprint completed</p>
<p tabindex="0" class="focus:outline-none focus:text-indigo-600 text-xs leading-3 underline cursor-pointer text-green-700">View</p>
</div>
</div>
</div>
<div class="flex items-center justiyf-between">
<hr class="w-full">
<p tabindex="0" class="focus:outline-none text-sm flex flex-shrink-0 leading-normal px-3 py-16 text-gray-500">Thats it for now :)</p>
<hr class="w-full">
</div>
</div>
</div>
</div>
<script>
let notification = document.getElementById("notification");
let checdiv = document.getElementById("chec-div");
let flag3 = true;
const notificationHandler = () => {
if (!flag3) {
notification.classList.add("translate-x-full");
notification.classList.remove("translate-x-0");
checdiv.classList.add("hidden");
setTimeout(function () {
}, 10);
flag3 = true;
} else {
setTimeout(function () {
}, 10);
notification.classList.remove("translate-x-full");
notification.classList.add("translate-x-0");
checdiv.classList.remove("hidden");
flag3 = false;
}
};
</script>
</main>
</body>
</html>