<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <!--  This file has been downloaded from bootdey.com @bootdey on twitter -->
  <!--  All snippets are MIT license http://bootdey.com/license -->
  <title>Pets Matches</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <!-- Fixed navbar -->

  <div class="container">
    <div class="main-body">

      <!-- Breadcrumb -->
      <nav aria-label="breadcrumb" class="main-breadcrumb">
        <a class="navbar-brand" href="/"> <img style="zoom:10%;" class="brand" src="/css/images/blob.png" /></a>

        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a style="color: #231955;" class="nav-link" href="/logout"> logout  </a>
          </li>
          <li class="breadcrumb-item">
            <a style="color: #231955;" href="/find">  Find   </a>
          </li>
          <li class="breadcrumb-item active" aria-current="page">
            <a style="color: #231955;" class="nav-link" href="/addpets">   Add Pets   </a>
          </li>
        </ol>
      </nav>
      <!-- /Breadcrumb -->

      <div class="row gutters-sm">
        <div class="col-md-4 mb-3">
          <div class="card">
            <div class="card-body">
              <div class="d-flex flex-column align-items-center text-center">
                <img alt="Admin" class="rounded-circle" width="150" src="<%=profileData.Photo_URL%>" ;base64,>
                <div class="mt-3">
                  <h4><span> Name : </span> <%=profileData.fullName %></h4>
                  <p class="text-secondary mb-1"><span>Number :</span> <%=profileData.phone %></p>
                  <p class="text-muted font-size-sm"><span>Email : </span> <%= email %></p>
                  <button class="btn btn-primary"><a style=" color: #231955; text-decoration:none" href="/editpd/<%= profileData.login_userDB_id %>"> Mange profile </a></button>
                  <button class="btn btn-outline-primary"><a style=" color: #231955; text-decoration:none" href="/inbox/<%= profileData.login_userDB_id %>"> InBox </a></button>
                </div>
              </div>
            </div>
          </div>
          <div class="card mt-3">
            <ul class="list-group list-group-flush">

              <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                <%   if ( follower != null ){  %>
                <h6> <span>Matches By: </span><%= follower.followers_user.length %> </h6>
                <%  }else{%>
                <h6> <span>Matches By: </span> 0 </h6>

                <%  }  %>
                <%   if ( following != null ){  %>

                <h6> <span>My Matches: </span><%= following.following_users.length %> </h6>
                <%  }else{%>
                <h6> <span>followers: </span> 0 </h6>

                <%  }  %>
              </li>

            </ul>
          </div>
        </div>
        <div class="col-md-8">
          <div class="card mb-3">
            <div class="card-body">

              <div class="row">
                <% for(i=0; ads.length > i; i++){%>
                <% for(k=0; pics.length > k; k++){%>
                <%  if(i===k){ %>
                <div class="col-md-4">
                  <div class="blog-card blog-card-blog">
                    <div class="blog-card-image">
                      <a href="#"> <img class="img" src="<%=ads[i].petPic_Link%>" ;base64,> </a>
                      <div class="ripple-cont"></div>
                    </div>
                    <div class="blog-table">
                      <h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> pets INFO</h6>
                      <h4 class="blog-card-caption">
                        <a href="#"> My pet : <% ads[i].SpecialMarks%> it's age is: <%=ads[i].age%> years and its Health like: <%=ads[i].Health%></a>
                      </h4>
                      <p class="blog-card-description"> Category : <%=ads[i].category%>.</p>
                      <div class="ftr">
                        <div class="author">
                          <a href="#"> <img src="<%=profileData.Photo_URL%>" alt="..." class="avatar img-raised"> <span>Lorem</span> </a>
                        </div>
                        <div class="stats">
                           <button class="btnCard" type="button" name="button">
                          <a style="  color: #231955; text-decoration:none" href="/editads/<%= ads[i].userID %>"> Mange your Ads</a>
                        </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <%} %>
                <%} %>
                <%} %>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>




              <style type="text/css">
                /* *********************************
   Some Style Overrides on Bootstrap
  ********************************** */
  h1{
    text-align:center;
    margin-bottom:50px;
    margin-top:50px;
  }
  .blog-card-blog {
      margin-top: 30px;
  }
  .blog-card {
      display: inline-block;
      position: relative;
      width: 100%;
      margin-bottom: 30px;
      border-radius: 6px;
      color: rgba(0, 0, 0, 0.87);
      background: #fff;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
  .blog-card .blog-card-image {
      height: 60%;
      position: relative;
      overflow: hidden;
      margin-left: 15px;
      margin-right: 15px;
      margin-top: -30px;
      border-radius: 6px;
      box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  }
  .blog-card .blog-card-image img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
      pointer-events: none;
  }
  .blog-card .blog-table {
      padding: 15px 30px;
  }
  .blog-table {
      margin-bottom: 0px;
  }
  .blog-category {
      position: relative;
      line-height: 0;
      margin: 15px 0;
  }
  .blog-text-success {
      color: #28a745!important;
  }
  .blog-card-blog .blog-card-caption {
      margin-top: 5px;
  }
  .blog-card-caption {
      font-weight: 700;
      font-family: "Roboto Slab", "Times New Roman", serif;
  }
  .fa {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  .blog-card-caption, .blog-card-caption a {
      color: #333;
      text-decoration: none;
  }

  p {
      color: #3C4857;
  }

  p {
      margin-top: 0;
      margin-bottom: 1rem;
  }
  .blog-card .ftr {
      margin-top: 15px;
  }
  .blog-card .ftr .author {
      color: #888;
  }

  .blog-card .ftr div {
      display: inline-block;
  }
  .blog-card .author .avatar {
      width: 36px;
      height: 36px;
      overflow: hidden;
      border-radius: 50%;
      margin-right: 5px;blog-
  }
  .blog-card .ftr .stats {
      position: relative;
      top: 1px;
      font-size: 14px;
  }
  .blog-card .ftr .stats {
      float: right;
      line-height: 30px;
  }
                .navbar-inverse {
                  background: rgba(62, 195, 246, 0);
                  border-bottom: none;
                }

                .navbar-inverse .navbar-toggle {
                  border: 1px solid #333;
                  border-color: rgba(255, 255, 255, 0.7);
                }

                .navbar-inverse .navbar-collapse,
                .navbar-inverse .navbar-form {
                  border-color: transparent;

                  @media (max-width: 767px) {
                    background: rgba(255, 255, 255, 0.75);
                  }
                }

                .navbar-inverse .navbar-nav>li>a {
                  color: black;


                }

                .navbar-inverse .navbar-nav>li>a:hover,
                .navbar-inverse .navbar-nav>li>a:focus {
                  color: #22F;

                }

                ul.nav {}

                /* *********************************
           Toolbar Logo
  ********************************** */
                .small-logo-container {
                  padding-top: 50px;
                  height: 50px;
                  overflow: hidden;
                }

                .small-logo {
                  color: white;
                  font-size: 2.5em;
                  padding-bottom: 2px;
                }

                /* *********************************
           Big Logo
  ********************************** */
                .big-logo-row {
                  background: gold;

                  .big-logo-container {
                    padding-top: 100px;
                  }

                  h1 {
                    font-size: 8em;
                    margin: 0;
                    padding: 0 0 15px 0;

                    @media (min-width: 400px) {
                      font-size: 4.5em;
                    }

                    @media (min-width: 440px) {
                      font-size: 5.5em;
                    }

                    @media (min-width: 500px) {
                      font-size: 6.5em;
                    }

                    @media (min-width: 630px) {
                      font-size: 7.5em;
                    }

                    @media (min-width: 768px) {
                      font-size: 9em;
                      padding-bottom: 15px * 2;
                    }

                    @media (min-width: 1200px) {
                      font-size: 12em;
                    }
                  }
                }
              </style>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

              <script type="text/javascript">
                window.addEventListener('load', (event) => {
                  $(".carousel-item").removeClass("active");
                  $("#run").addClass("active");


                });
              </script>

</body>

</html>
