{% load sekizai_tags %}

<style>
{% addtoblock "css" %}
  .carousel-control-prev {
    margin-left:-2rem;
  }

  .carousel-control-next {
    margin-left: 0rem;
  }

  .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237e7e7e'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
  }

  .carousel-control-next-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237e7e7e'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      margin-right: -4em;
  }

   .carousel-indicators {
     list-style: none;
     display: flex;
     justify-content: center;
     margin: 0;
     padding: 0;
     padding-bottom: 1em;
   }

   .carousel-indicators .active {
     background-color: #7e7e7e;
     border: 1px solid #7e7e7e;
   }

   .carousel-inner {
     padding-left: 2em;
     padding-right: 0em;

   }

   {% endaddtoblock %}
   </style>

 <div class="modal fade" id="introTourModal" tabindex="-1" aria-labelledby="introTourModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
         <div class="modal-header">
           <h3 class="modal-title" id="introTourModalLabel">Welcome to Labelbase!</h3>
           <button type="button" class="btn-close ok-welcome-message" data-bs-dismiss="modal" aria-label="Close"></button>

         </div>
         <div class="modal-body">
           <p>
             Some key details to bring to your attention.
           </p>
           <br>
           <div id="carouselIntroduction" class="carousel slide" data-bs-ride="carousel">
             <div class="carousel-inner">

               <div class="carousel-item active">
                  <h5>Sentry Error Tracking</h5>
                  <p>
                    We use Sentry for anonymized error tracking to improve service reliability. This is enabled by default in this new release. Rest assured, no personal data is collected.
                  </p>
                  <p>
                    You can opt out of this feature in your <a class="ok-welcome-message" href="{% url 'userprofile' %}">profile settings</a>.
                  </p>
                </div>

               <!--div class="carousel-item active">
                 <h5>Customizable Settings</h5>
                 <p>Personalize your experience with customizable settings. Tailor your Labelbase to fit your workflow seamlessly.
                 </p>
                 <p>
                   <a href="{% url 'userprofile' %}">Profile Settings</a>
                 </p>
               </div-->

                <div class="carousel-item ">
                 <h5>Mempool and Electrum Server</h5>
                 <p>
                   If you would like to set up your own Mempool or Electrum server for privacy reasons, please visit the dedicated settings section in your  <a  class="ok-welcome-message"  href="{% url 'userprofile' %}">profile settings</a>.
                 </p>

               </div>

               <!--div class="carousel-item">
                 <h5>Tree Maps and Analytics</h5>
                 <p>Access detailed Tree Maps and analytics to make data-driven decisions which UTXO to spend next.</p>

               </div-->


               <div class="carousel-item">
                 <h5>Backups</h5>
                 <p>Before upgrading to a newer version, backup your data by exporting your labels as a BIP-329 file or an encrypted archive.</p>
               </div>

               <div class="carousel-item">
                 <h5>Yellow Screen</h5>
                 <p>In this new release, you will see a yellow screen in case of an error. Please create a screenshot and share it with us to help improve Labelbase.</p>
               </div> 
             </div>

             <button class="carousel-control-prev" type="button" data-bs-target="#carouselIntroduction" data-bs-slide="prev">
               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
               <span class="visually-hidden">Previous</span>
             </button>

             <button class="carousel-control-next" type="button" data-bs-target="#carouselIntroduction" data-bs-slide="next">
               <span class="carousel-control-next-icon" aria-hidden="true"></span>
               <span class="visually-hidden">Next</span>
             </button>
           </div>
         </div>
         <div class="modal-footer" style="zIndex:9999;">
           <ol class="carousel-indicators">
             <li data-bs-target="#carouselIntroduction" data-bs-slide-to="0"></li>
             <li data-bs-target="#carouselIntroduction" data-bs-slide-to="1"></li>
             <li data-bs-target="#carouselIntroduction" data-bs-slide-to="2"></li>
           </ol>
           <button type="button" class="btn btn-primary ok-welcome-message" style="zIndex:9999;" data-bs-dismiss="modal">Get Started</button>
         </div>
       </div>
     </div>
   </div>



 <script>
{% addtoblock "js" %}
     $(document).ready(function() {
         $('.ok-welcome-message').click(function() {
             $.ajax({
                 url: '{% url "has_seen_welcome_popup" %}',
                 type: 'POST',
                 data: {},  // Pass any necessary data
                 headers: {
                     'X-CSRFToken': '{{ csrf_token }}',
                     'Content-Type': 'application/json',
                 },
                 success: function(data) {
                     console.log(data);
                     // Handle success (e.g., close modal, show message)
                 },
                 error: function(error) {
                     console.error(error);

                 }
             });
         });
         {% if request.user.profile.has_seen_welcome_popup %}
         {% else %}
          $('#introTourModal').modal('show');
         {% endif %}
     });

{% endaddtoblock %}
 </script>