{% extends 'invoice.html' %}
{% block extra_content %}
<div data-htmx-modal-root>
<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
<div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
	<div class="modal-dialog modal-dialog-centered">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title">Create account</h5>
		</div>
		<div class="modal-body">
      <p>Create an account now to manage your invoices, connect with hundreds of other hobbyists near you, and get notified about future auctions. All completely free!
        <br>
      <div class="modal-footer">
        <button data-modal-close-action="none" class="btn btn-secondary">No thanks, just view invoice</button>
        <a href="{{view.button_link}}" class="btn btn-primary">Create account</a>
    </div>
	  </div>
	</div>
  </div>
</div>
</div>
<script>window.mountHtmxModal(document.currentScript.previousElementSibling);</script>
{% endblock %}