<div id="wizard-container">
    <!-- WIZARD STEP CONTENT -->
    <div id="clickable-wizard" action="page_forms_wizard.html" method="post" class="form-horizontal form-bordered">
        <!-- First Step -->
        <div class="step">
            <!-- Step Info -->
            <div class="wizard-nav">
                    <ul class="nav nav-pills nav-justified clickable-steps widget-steps-nav">
                        <li class="active">
                            <a href="javascript:void(0)" data-gotostep="step-1">1. Select Type</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" data-gotostep="step-2" disabled>2. Widget Setup</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" data-gotostep="step-3" disabled>3. Widget Popup</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" data-gotostep="step-4" disabled>4. Call Settings</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" data-gotostep="step-5" disabled>5. after-hours</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" data-gotostep="step-6" disabled>6. Triggers</a>
                        </li>
                    </ul>
            </div>
            <!-- END Step Info -->
            <!-- STEP CONTENT -->
            <div id="widget-preview-container">
                <div>
                    <div class="widget-configure" id="step-1"></div>
                    <div class="widget-configure hide" id="step-2">
                        <div class="widget-preview" data-widget-state="closed">
                            <div class="centered-container <% if (typeButton || typeLink) { %> hide <% } %>">
                                <h4 class="text-muted centered">Edit the call widget by using the settings on the left, the steps above as well as the general settings at the top.</h4>
                            </div>
                            <div class="centered-container">
                                <div class="centered">
                                    <div>
                                        <label class="widget-preview-area-padding"><%= __('This is the widget and image preview section. This area displays your widget design changes in real-time. This area simulates your browser window and the widget will be placed in the same area on your website.') %></label>
                                    </div>
                                    <div id="widget-link-container"  class="hide">
                                        <a id="buyercall-link"><%= __('Click here to contact us!') %></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-configure hide" id="step-3">
                        <div class="widget-preview" data-widget-state="beforecall">
                            <div class="widget-preview-background <% if (!transparentBackground) { %>hide<% } %>" >
                            </div>
                        </div>
                    </div>
                    <div class="widget-configure no-preview hide" id="step-4"></div>
                    <div class="widget-configure hide" id="step-5">
                        <div class="widget-preview" data-widget-state="unavailable">
                            <div class="widget-preview-background <% if (!transparentBackground) { %>hide<% } %>" >
                            </div>
                        </div>
                    </div>
                    <div class="widget-configure hide" id="step-6"></div>
                </div>
            </div>
            <!-- END STEP CONTENT -->
        </div>
        <!-- END First Step -->
    </div>
    <!-- END WIZARD STEP CONTENT -->
    <div class="widget-footer">
        <div class="col-md-4" style="text-align:center"></div>
        <div class="form-group col-md-4 widget-footer-btn-save">
          <button id="next-button" type="submit" class="btn btn-fill btn-light-blue"><%= __('Next') %></button>
          <button id="save-button" type="submit" class="btn btn-fill btn-light-blue" style="display: none"><%= __('Save and Continue') %></button>
          <a id="skip-button" class="btn btn-simple" style="display: none">
            <%= __('Skip') %>
          </a>
        </div>
        <div class="form-group col-md-4 widget-footer-btn-exit">
            <button id="install-instructions" type="submit" class="btn btn-fill btn-light-blue" style="display: none">
                <%= __('Install Instructions') %>
            </button>
            <a id="exit-button" href="{{ url_for('agents.call_agents') %>" class="btn btn-simple"><%= __('Exit') %></a>
        </div>
    </div>
</div>
<!-- END WIZARD BODY CONTENT -->