{% include 'header.twig' %}
<div class="top-padding"></div>


<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="page-header-lgin">
        <div class="contpghdr">
          <span class="bdghdr threedblue">{{ site["site_name"] }}</span>
          <h2>YOUR <span>ACCOUNT</span></h2>
          <p>Check and change your accounts settings from here.</p>
        </div>
        <img src="https://cdn.mypanel.link/edeed4/i4j3y4nszcbip0je.png">
      </div>
    </div>
  </div>
</div>



<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4">
      <div class="profilecardacc">
        <div class="profilePictureContainer">
          <div class="backprof"></div>
          <div class="imgwrapprof">
            <img class="profilePicture" src="https://i.imgur.com/thHPBoh.png" alt="Profile Picture">
            <label for="fileInput" class="custom-file-upload">
              <i class="fas fa-pen"></i>
              <input type="file" id="fileInput" class="form-control uploadpp" onchange="uploadPicture(event)" accept="image/*" style="display: none;">
            </label>
          </div>
        </div>
        <p class="usernameprof">@QuickStart</p>
        <h3>QuickStart</h3>
        <!--<input type="file" id="fileInput" class="form-control uploadpp" onchange="uploadPicture(event)" accept="image/*">  -->
        <hr>
      </div>

    </div>
  </div>
<script>
      const fileInput = document.getElementById("fileInput");
      const profilePictures = document.querySelectorAll(".profilePicture");
      const maxSize = 1024 * 1024; // 1MB

      function uploadPicture(event) {
        const file = fileInput.files[0];
        if (file.size > maxSize) {
          alert("File size exceeds 1MB. Please upload a smaller file.");
          return;
        }
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          const img = new Image();
          img.src = reader.result;
          img.onload = function () {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            const squareSize = Math.min(img.width, img.height);
            canvas.width = squareSize;
            canvas.height = squareSize;
            const offsetX = (img.width - squareSize) / 2;
            const offsetY = (img.height - squareSize) / 2;
            ctx.drawImage(
              img,
              offsetX,
              offsetY,
              squareSize,
              squareSize,
              0,
              0,
              squareSize,
              squareSize
            );
            const croppedDataURL = canvas.toDataURL("image/jpeg");
            localStorage.setItem("profilePicture", croppedDataURL);
            profilePictures.forEach((profilePicture) => {
              profilePicture.src = croppedDataURL;
            });
          };
        };
      }

      const storedPicture = localStorage.getItem("profilePicture");
      if (storedPicture) {
        profilePictures.forEach((profilePicture) => {
          profilePicture.src = storedPicture;
        });
      }
    </script>


						<div id="main-page" class="well well-float table-responsive">
							<div class="">
								{% if error %}
        <div class="alert alert-dismissible alert-danger">
          {{ errorText }}
        </div>
      {% endif %}
      {% if success %}
        <div class="alert alert-dismissible alert-success">
          {{ successText }}
        </div>
      {% endif %}
								
								


      <div class="Kpcss2"class="well">
        <form method="post" action="account">
          <div class="form-group">
            <label for="charge" class="control-label">{{ lang['account.password.current'] }}</label>
            <input type="password" class="form-control" name="current_password">
          </div>

          <div class="form-group">
            <label for="charge" class="control-label">{{ lang['account.password.new'] }}</label>
            <input type="password" class="form-control" name="password">
          </div>

          <div class="form-group">
            <label for="charge" class="control-label">{{ lang['account.password.confirm'] }}</label>
            <input type="password" class="form-control" name="confirm_password">
          </div>
          <button type="submit" class="btn btn-primary">{{ lang['account.password.button'] }}</button>
        </form>
      </div>

      {% if site['languages']|length > 1 %}
        <div class="Kpcss2"class="well">
          <form method="post" action="account/change_lang">

            <div class="form-group">
              <label for="charge" class="control-label">{{ lang['account.changelang.title'] }}</label>
              <select class="form-control" name="lang">
                  {% for language in site['languages'] %}
                  <option {% if language["code"] == user["lang"] %} selected {% endif %} value="{{ language["code"] }}">{{ language["name"] }}</option>
                  {% endfor %}
              </select>
            </div>

            <button type="submit" class="btn btn-primary">{{ lang['account.changelang.button'] }}</button>
          </form>
        </div>
       {% endif %}

       <div class="Kpcss2"class="well">
         <form method="post" action="account/timezone">

           <div class="form-group">
             <label for="charge" class="control-label">{{ lang['account.timezone.title'] }}</label>
             <select class="form-control" name="timezone">
                 {% for timezone in timezones %}
                 <option {% if timezone["timezone"] == user['timezone'] %} selected {% endif %} value="{{ timezone["timezone"] }}">{{ timezone["label"] }}</option>
                 {% endfor %}
             </select>
           </div>

           <button type="submit" class="btn btn-primary">{{ lang['account.timezone.button'] }}</button>
         </form>
       </div>

      <div class="Kpcss2"class="well">
        <form method="post" action="account/newapikey">
          <div class="form-group">
            <label for="charge" class="control-label">API Link</label>
            <input type="text" class="form-control" value="{{ site['url'] }}/api/v2" readonly>
          </div>

          <div class="form-group">
            <label for="charge" class="control-label">API Key</label>
            <input type="text" class="form-control" value="Press regenerate button to generate api key." readonly>
          </div>
          <button type="submit" class="btn btn-primary">{{ lang['account.generate.key'] }}</button>
        </form>
      </div>
								
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
		

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
    <style>
      .swiper-container {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        font-size: 18px;
      }
      .modal-content {
        text-align: center;
      }
      .btn-next,
      .btn-close {
        margin-top: 20px;
      }
    </style>

    <!-- Modal -->
    <div
      id="dripfeedModal"
      class="modal fade"
      tabindex="-1"
      role="dialog"
      aria-labelledby="dripfeedModallabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="onboardingModalLabel">
              How do I turn on drip feed?
            </h4>
          </div>
          <div class="modal-body">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div>Slide 1 Content</div>
                  <button class="btn btn-primary btn-next">Okay, next</button>
                </div>
                <div class="swiper-slide">
                  <div>Slide 2 Content</div>
                  <button class="btn btn-primary btn-next">Okay, next</button>
                </div>
                <div class="swiper-slide">
                  <div>Slide 3 Content</div>
                  <button class="btn btn-primary btn-next">Okay, next</button>
                </div>
                <div class="swiper-slide">
                  <div>Slide 4 Content</div>
                  <button class="btn btn-success btn-close">Close</button>
                </div>
              </div>
              <!-- Add Pagination -->
              <div class="swiper-pagination"></div>
            </div>
            <a href="#" class="btn btn-link">What is Drip Feed?</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Subscription Modal -->
    <div
      id="subscriptionModal"
      class="modal modalfaqs fade"
      tabindex="-1"
      role="dialog"
      aria-labelledby="subscriptionModallabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="subscriptionModalLabel">
              How do I subscribe?
            </h4>
          </div>
          <div class="modal-body">
            <div class="swiper-container-subscription">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div>
                    <div class="steps">
                      <span class="numstep">1</span>
                      <div>
                        <h2>Step 1</h2>
                        <p>Choose the service according to your daily needs.</p>
                      </div>
                    </div>
                    <div class="steps">
                      <span class="numstep">2</span>
                      <div>
                        <h2>Step 2</h2>
                        <p>
                          Put your Social Media Profile Link ( Note : It must be
                          Public else we cannot fetch the new post links )
                        </p>
                      </div>
                    </div>
                  </div>
                  <button class="btn btn-nxt btn-next-subscription">
                    Okay, next
                  </button>
                </div>
                <div class="swiper-slide">
                  <div>
                    <div class="steps">
                      <span class="numstep">3</span>
                      <div>
                        <h2>Step 3</h2>
                        <p>
                          Put an Minimum and Maximum Quantity of Engagement you
                          want in your daily posts.
                        </p>
                      </div>
                    </div>
                    <div class="steps">
                      <span class="numstep">4</span>
                      <div>
                        <h2>Step 4</h2>
                        <p>Set an Expiry Date where the Campaign will End.</p>
                      </div>
                    </div>
                  </div>
                  <button class="btn btn-nxt btn-next-subscription">
                    Okay, next
                  </button>
                </div>
                <div class="swiper-slide">
                  <div>
                    <div class="recsub">
                      <span class="redrec">Recommendation</span>
                      <p>
                        Maintain an healthy wallet balance so that we can work
                        automatically with your new posts. Else the campaign
                        will be paused due to insufficient wallet balance.
                      </p>
                    </div>
                    <button class="btn btn-faqscls btn-close-subscription">
                      Close
                    </button>
                  </div>
                </div>
              </div>
              <div class="swiper-pagination-subscription"></div>
            </div>
          </div>
        </div>
      </div>
    </div>



<footer>
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6">
            <a class="footer-brand" href="/"> <img style="max-width:205px;" src="{{ site['logo'] }}" alt="{{ site["site_name"] }}" title="{{ site["site_name"] }}"> </a>
          </div>
          <div class="col-sm-6">
            <p class="footerp">
              © 2021-2024, {{ site["site_name"] }}, Inc. or its affiliates
            </p>
          </div>
        </div>
      </div>
    </footer>
{% include 'footer.twig' %}