<?php
/**
 * @var $fields array
 */

use auctionforge\inc\helpers\View;

?>
<script type="text/template" id="submission-pre-template">
    <div class="bp-col bp-basis-100 bp-f-center bp-gap-2 d-flex bp-px-15 bp-text-center">
        <h1>Submit your vehicle for auction</h1>
        <div class="bp-mb-30">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab accusamus adipisci, asperiores consequatur cumque dolore, eum ex expedita incidunt,
                laudantium magnam neque pariatur porro quaerat qui suscipit totam veniam.</p>
        </div>
        <?= do_shortcode("[bp_profile_buttons]") ?>
    </div>
</script>
<script type="text/template" id="submission-form-template">
    <div class="bp-submission__form bp-col bp-lg-basis-50 bp-basis-100">
        <form id="bp-submission-form" action="/" class="bp-from bp-from__min loader-container">
            <?php
            foreach ($fields as $key => $field) { ?>
                <?= View::render('templates/chunks/fields/wrapper', [
                    'key' => $key,
                    'field' => $field,
                    'args' => [
                        'class' => 'progress-bar-elem'
                    ],
                ]) ?>
            <?php } ?>
            <button class="bp-btn bp-btn-black" type="submit"><?= __("Submit", "auctionforge") ?></button>
            <div class="bs-loader bs-loader-section <?= apply_filters('bp_hidden_class', 'hidden') ?>"></div>
        </form>
    </div>
    <div class="bp-submission__info bp-col bp-lg-basis-50 bp-basis-100">
        <div class="form-helper">
            <div id="bp-submission-bar" class="form-helper__progress-bar bp-mb-30">
                <div class="bp-progress-bar">
                    <p><span>0%</span>&nbsp;completed</p>
                    <div class="bp-progress-bar__line">
                        <div class="bp-progress-bar__inner" style="width: 1%; background-color: rgba(255,255,255,0)"></div>
                    </div>
                </div>
            </div>
            <div class="form-helper__progress-content bp-mb-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse officiis rem. Corporis cum
                dignissimos doloribus error esse et harum hic illo magni nihil nisi officia perferendis sapiente, tenetur voluptate?</div>
            <div id="bp-submission-help" class="form-helper__progress-info">
                <p class="title bp-mb-20">Need help?</p>
                <div class="bp-d-flex bp-md-nowrap form-helper__progress-item">
                    <p>Email</p>
                    <p>support@domain.com</p>
                </div>
                <div class="bp-d-flex bp-md-nowrap form-helper__progress-item">
                    <p>Phone</p>
                    <p>+3265464325</p>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/template" id="submission-approved-template">
    <div class="bp-content bp-alert alert bp-alert-danger alert-primary bp-text-center bp-mb-30 bp-w-100">
        <p><?= __('Please complete your registration to participate in our auctions. <a href=\'#\' id=\'resendEmailSection\'>Resend email</a>.', 'auctionforge') ?></p>
        <div class="bs-loader bs-loader-section <?= apply_filters('bp_hidden_class', 'hidden') ?>"></div>
    </div>
</script>
<script type="text/template" id="submission-tu-template">
    <div class="bp-col bp-basis-100 bp-f-center bp-gap-2 d-flex bp-px-15 bp-text-center">
        <h1>Detail received successfully.</h1>
        <div class="bp-mb-30">
            <p>Would you like add another vehicle?</p>
        </div>
        <div class=" bp-content bp-justify-between bp-row bp-no-margin bp-add-padding">
            <div class="bp-col bp-d-flex bp-md-f-wrap bp-f-center">
                <a href="<?= site_url() ?>" class="bp-btn bp-btn-login bp-header__btn"><?= __('Back to home page', 'auctionforge') ?></a>
                <button id="submissions-again" class="bp-btn bp-btn-register bp-header__btn"><?= __('I have another car', 'auctionforge') ?></button>
            </div>
        </div>
    </div>
</script>