{% extends "base.html" %} {% block title %}IoT Transparency{% endblock %}
{% block content %}
<progress value="75" max="100"></progress>
<h1>IoT Transparency Setup</h1>
<h2>Step 4 of 4: Schedule Interview</h2>
<p>The final portion of the study is an interview where we discuss your experience with IoT Transparency. Please schedule an interview to take place in the next 5-10 days using the widget below.</p>

<div id="calendly-embed"></div>

<details id="calendly-error" hidden>
    <summary>Unable to schedule an interview?</summary>
    <p>If the scheduling widget is not loading, you can schedule an interview by clicking <a href="https://calendly.com/bweinshel/iot-transparency-interview?hide_event_type_details=1&hide_gdpr_banner=1&name=ID%3A%20{{ user_id }}%20%28do%20not%20edit%29" target="_blank">here</a>.</p>
    <p>If no times are available that work for your schedule, please contact us at <a href="mailto:iot-transparency@andrew.cmu.edu">iot-transparency@andrew.cmu.edu</a>.</p>
    <a role="button" href="{{ url_for('setup_complete_step', step='interview') }}">Continue to next step</a>

</details>

<a role="button" class="continue-button" href="{{ url_for('setup_complete_step', step='interview') }}" hidden>Continue</a>

<script>
setTimeout(function() {
    document.getElementById('calendly-error').hidden = false;
}, 2000);

Calendly.initInlineWidget({
    url: "https://calendly.com/bweinshel/iot-transparency-interview?hide_event_type_details=1&hide_gdpr_banner=1",
    prefill: {
        name: "ID: {{ user_id }} (do not edit)",
    },
    parentElement: document.getElementById('calendly-embed'),
    resize: true
});

window.addEventListener("message", function(e) {
    if (e.data.event === "calendly.event_scheduled") {
        document.getElementById('calendly-error').hidden = true;
        document.querySelector('.continue-button').hidden = false;
    }
});
</script>
{% endblock %}