<%- include('./static/header') %>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">  
  <style>
    .modal {
      transition: opacity 0.25s ease;
    }
    body.modal-active {
      overflow-x: hidden;
      overflow-y: visible !important;
    }
  </style>


<div class="jumbotron bg-indigo">
 <center> <img src="<%=avatar%>" alt="Greesy | <%=ismi%>#<%=disc%>" /></center>
  <br>
  <center>
    <% if(owner){ %>
    <i class="fad fa-crown" id="owner"></i>
    <%}%>
<% if(Mod){ %>
  
  <i class="fad fa-wrench" id="mod"></i>
  
  <%}%>
    <% rozetler.forEach(flag=> { %>
  <%  if (flag === "HOUSE_BALANCE") { %>
                                    <span data-tooltip="Hypesquad Balance"
                                    data-tooltip-location="top">
                                    <img draggable="false" src="https://discord.com/assets/9fdc63ef8a3cc1617c7586286c34e4f1.svg" data-tooltip="Hypesquad Balance" class="tippy mr-1" data-tippy-content="Hypesquad Balance" width="32px">
                                </span>
                                    <% } %>
  <%  if (flag === "HOUSE_BRILLIANCE") { %>
                                <span data-tooltip="Hypesquad Brilliance"
                                    data-tooltip-location="top">
                               <img draggable="false" src="https://ptb.discord.com/assets/48cf0556d93901c8cb16317be2436523.svg" class="mr-1" data-tippy-content="HypeSquad Brilliance" width="32px" id="hsb">
                               </span>
                               <% } %>
                
                              <%  if (flag === "HOUSE_BRAVERY") { %>
                                <span data-tooltip="Hypesquad Bravery"
                                    data-tooltip-location="top">
                               <img draggable="false" src="https://canary.discord.com/assets/64ae1208b6aefc0a0c3681e6be36f0ff.svg" class=" mr-1" data-tippy-content="HypeSquad Bravery" width="32px">
                          </span>
                               <% } %>
                               
                             <%  if (flag === "VERIFIED_DEVELOPER") { %>
                                <span data-tooltip="Verified Developer"
                                    data-tooltip-location="top">
                               <img draggable="false" src="https://discord.com/assets/45cd06af582dcd3c6b79370b4e3630de.svg" class=" mr-1" data-tippy-content="Early Verified Developer" width="32px">
                               </span>
                               <% } %>
                               
                              <% if (flag === "EARLY_SUPPORTER") { %>
                                <span data-tooltip="Early Supporter"
                                    data-tooltip-location="top">
                               <img draggable="false" src="https://discord.com/assets/23e59d799436a73c024819f84ea0b627.svg" class=" mr-1" data-tippy-content="Early Supporter" width="32px">
                               </span>
                               <% } %>
                
    <% }) %>
   </center>

</div>
<br>
<br>
<div class="jumbotron">
<% if(user){ %>
  <% if(user.id == p.id){ %>
<button class="modal-open btn btn-success"><i class="fad fa-pencil"></i>  Edit</button>
 
    <%}%>
  <%}%>
</div>

   <!--Modal-->
  
  <script>
     
  </script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script>
      // With the above scripts loaded, you can call `tippy()` with a CSS
      // selector and a `content` prop:
      tippy('#mod', {
        content: 'Greesy Moderator',
      });
  tippy('#owner', {
        content: 'Greesy Owner',
      });
     tippy('#hsb', {
        content: 'House Brilliance',
});
    </script>
