{"id":60374,"date":"2023-11-16T16:01:41","date_gmt":"2023-11-16T16:01:41","guid":{"rendered":"https:\/\/softopper.com\/?page_id=60374"},"modified":"2024-11-06T16:44:38","modified_gmt":"2024-11-06T16:44:38","slug":"top-builds","status":"publish","type":"page","link":"https:\/\/softopper.com\/top-builds\/","title":{"rendered":"Top Builds"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"60374\" class=\"elementor elementor-60374\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8c61e71 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"8c61e71\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c019513\" data-id=\"c019513\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2b682f9 elementor-widget elementor-widget-bpag-community-banner\" data-id=\"2b682f9\" data-element_type=\"widget\" data-widget_type=\"bpag-community-banner.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"bg-[rgba(51,51,51,255)]\">\n    <div class=\"h-[50px]\"><\/div>\n    <div class=\"max-w-[1600px] mx-auto py-12 px-4 text-center\">\n        <h1 class=\"text-white text-[2rem] md:text-[3.5rem] lg:text-[6rem]\">Top Builds<\/h1>\n    <\/div>\n    <div class=\"bpag-community__tabs flex flex-row flex-wrap justify-center max-w-[1600px] mx-auto\">\n                <a href=\"community\" class=\"\">Community<\/a>\n                <a href=\"top-builds\" class=\"active\">Top Builds<\/a>\n                <a href=\"recent-posts\" class=\"\">Recent Posts<\/a>\n            <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ae9524b elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"ae9524b\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-30e4a97\" data-id=\"30e4a97\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0401b69 elementor-widget elementor-widget-bpag-community-submit-form\" data-id=\"0401b69\" data-element_type=\"widget\" data-widget_type=\"bpag-community-submit-form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"bpag-community-submit-form-parent\" class=\"bg-[rgba(220,220,220,255)] py-12 px-4\">\n    <div class=\"bpag-community__container text-[3rem] text-left heading-font uppercase my-12\">Upload My Build<\/div>\n    <div class=\"bpag-community__container mb-8\">\n        <div class=\"bpag-community__eyebrow bg-primary w-[150px] h-[5px] mb-4\"><\/div>\n        <p><\/p>\n    <\/div>\n    <!-- steps -->\n    <div class=\"grid grid-cols-3 bpag-community__upload-build-form-header bpag-community__container\">\n        <div data-js=\"step-1-header\" class=\"step active\">\n            <span>Step 1<\/span>\n            <b>Your Info<\/b>\n        <\/div>\n        <div data-js=\"step-2-header\" class=\"step\">\n            <span>Step 2<\/span>\n            <b>Add Photos<\/b>\n        <\/div>\n        <div data-js=\"step-3-header\" class=\"step\">\n            <span>Step 3<\/span>\n            <b>Add Products<\/b>\n        <\/div>\n    <\/div>\n    <form hx-target=\"#bpag-community-submit-form-parent\" hx-post=\"\/wp-json\/bpag-community\/v1\/upload-form\"\n        class=\"min-h-[500px] bpag-community__upload-build-form bpag-community__container relative\">\n        <div class=\"bpag-community__below-steps\"><\/div>\n\n        <div id=\"step-1\" class=\"\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n                <div>\n                    <legend>Your Info<\/legend>\n                    <div class=\"input-group\">\n                        <label for=\"first-name\">First Name<\/label>\n                        <input type=\"text\" required name=\"first-name\" \/>\n                    <\/div>\n                    <div class=\"input-group\">\n                        <label for=\"last-name\">Last Name<\/label>\n                        <input type=\"text\" required name=\"last-name\" \/>\n                    <\/div>\n                    <div class=\"input-group\">\n                        <label for=\"email\">Email<\/label>\n                        <input type=\"text\" required name=\"email\" \/>\n                    <\/div>\n                <\/div>\n                <div>\n                    <legend>Select Your Vehicle<\/legend>\n                    <div class=\"input-group\">\n                        <label for=\"year\">Year<\/label>\n                        <select name=\"year\" required>\n                            <option selected=\"selected\" disabled=\"disabled\">Year<\/option>\n                                                        <option value=\"2026\">2026<\/option>\n                                                        <option value=\"2025\">2025<\/option>\n                                                        <option value=\"2024\">2024<\/option>\n                                                        <option value=\"2023\">2023<\/option>\n                                                        <option value=\"2022\">2022<\/option>\n                                                        <option value=\"2021\">2021<\/option>\n                                                        <option value=\"2020\">2020<\/option>\n                                                        <option value=\"2019\">2019<\/option>\n                                                        <option value=\"2018\">2018<\/option>\n                                                        <option value=\"2017\">2017<\/option>\n                                                        <option value=\"2016\">2016<\/option>\n                                                        <option value=\"2015\">2015<\/option>\n                                                        <option value=\"2014\">2014<\/option>\n                                                        <option value=\"2013\">2013<\/option>\n                                                        <option value=\"2012\">2012<\/option>\n                                                        <option value=\"2011\">2011<\/option>\n                                                        <option value=\"2010\">2010<\/option>\n                                                        <option value=\"2009\">2009<\/option>\n                                                        <option value=\"2008\">2008<\/option>\n                                                        <option value=\"2007\">2007<\/option>\n                                                        <option value=\"2006\">2006<\/option>\n                                                        <option value=\"2005\">2005<\/option>\n                                                        <option value=\"2004\">2004<\/option>\n                                                        <option value=\"2003\">2003<\/option>\n                                                        <option value=\"2002\">2002<\/option>\n                                                        <option value=\"2001\">2001<\/option>\n                                                        <option value=\"2000\">2000<\/option>\n                                                        <option value=\"1999\">1999<\/option>\n                                                        <option value=\"1998\">1998<\/option>\n                                                        <option value=\"1997\">1997<\/option>\n                                                        <option value=\"1996\">1996<\/option>\n                                                        <option value=\"1995\">1995<\/option>\n                                                        <option value=\"1994\">1994<\/option>\n                                                        <option value=\"1993\">1993<\/option>\n                                                        <option value=\"1992\">1992<\/option>\n                                                        <option value=\"1991\">1991<\/option>\n                                                        <option value=\"1990\">1990<\/option>\n                                                        <option value=\"1989\">1989<\/option>\n                                                        <option value=\"1988\">1988<\/option>\n                                                        <option value=\"1987\">1987<\/option>\n                                                        <option value=\"1986\">1986<\/option>\n                                                        <option value=\"1985\">1985<\/option>\n                                                        <option value=\"1984\">1984<\/option>\n                                                        <option value=\"1983\">1983<\/option>\n                                                        <option value=\"1982\">1982<\/option>\n                                                        <option value=\"1981\">1981<\/option>\n                                                        <option value=\"1980\">1980<\/option>\n                                                        <option value=\"1979\">1979<\/option>\n                                                        <option value=\"1978\">1978<\/option>\n                                                        <option value=\"1977\">1977<\/option>\n                                                        <option value=\"1976\">1976<\/option>\n                                                        <option value=\"1975\">1975<\/option>\n                                                        <option value=\"1974\">1974<\/option>\n                                                        <option value=\"1973\">1973<\/option>\n                                                        <option value=\"1972\">1972<\/option>\n                                                        <option value=\"1971\">1971<\/option>\n                                                        <option value=\"1970\">1970<\/option>\n                                                        <option value=\"1969\">1969<\/option>\n                                                        <option value=\"1968\">1968<\/option>\n                                                        <option value=\"1967\">1967<\/option>\n                                                        <option value=\"1966\">1966<\/option>\n                                                        <option value=\"1965\">1965<\/option>\n                                                        <option value=\"1964\">1964<\/option>\n                                                        <option value=\"1963\">1963<\/option>\n                                                        <option value=\"1962\">1962<\/option>\n                                                        <option value=\"1961\">1961<\/option>\n                                                    <\/select>\n                    <\/div>\n                    <div class=\"input-group\">\n                        <label for=\"make\">Make<\/label>\n                        <select name=\"make\" required disabled>\n                            <option selected=\"selected\" disabled=\"disabled\">Make<\/option>\n                                                        <option value=\"Chevrolet\">Chevrolet<\/option>\n                                                        <option value=\"Dodge\">Dodge<\/option>\n                                                        <option value=\"Ford\">Ford<\/option>\n                                                        <option value=\"GMC\">GMC<\/option>\n                                                        <option value=\"Honda\">Honda<\/option>\n                                                        <option value=\"International\">International<\/option>\n                                                        <option value=\"Isuzu\">Isuzu<\/option>\n                                                        <option value=\"Jeep\">Jeep<\/option>\n                                                        <option value=\"Mazda\">Mazda<\/option>\n                                                        <option value=\"Nissan\">Nissan<\/option>\n                                                        <option value=\"Plymouth\">Plymouth<\/option>\n                                                        <option value=\"Ram\">Ram<\/option>\n                                                        <option value=\"Suzuki\">Suzuki<\/option>\n                                                        <option value=\"Toyota\">Toyota<\/option>\n                                                    <\/select>\n                    <\/div>\n                    <div class=\"input-group\">\n                        <label for=\"model\">Model<\/label>\n                        <select name=\"model\" required disabled>\n                            <option selected=\"selected\" disabled=\"disabled\">Model<\/option>\n                                                        <option value=\"1500\">1500<\/option>\n                                                        <option value=\"1500 Classic\">1500 Classic<\/option>\n                                                        <option value=\"2500\">2500<\/option>\n                                                        <option value=\"3500\">3500<\/option>\n                                                        <option value=\"4Runner\">4Runner<\/option>\n                                                        <option value=\"B2000\">B2000<\/option>\n                                                        <option value=\"B2200\">B2200<\/option>\n                                                        <option value=\"B2300\">B2300<\/option>\n                                                        <option value=\"B2500\">B2500<\/option>\n                                                        <option value=\"B2600\">B2600<\/option>\n                                                        <option value=\"B3000\">B3000<\/option>\n                                                        <option value=\"B4000\">B4000<\/option>\n                                                        <option value=\"Blazer\">Blazer<\/option>\n                                                        <option value=\"Bronco\">Bronco<\/option>\n                                                        <option value=\"C10 Pickup\">C10 Pickup<\/option>\n                                                        <option value=\"C15\">C15<\/option>\n                                                        <option value=\"C15\/C1500 Pickup\">C15\/C1500 Pickup<\/option>\n                                                        <option value=\"C1500\">C1500<\/option>\n                                                        <option value=\"C20 Pickup\">C20 Pickup<\/option>\n                                                        <option value=\"C25\">C25<\/option>\n                                                        <option value=\"C25\/C2500 Pickup\">C25\/C2500 Pickup<\/option>\n                                                        <option value=\"C2500\">C2500<\/option>\n                                                        <option value=\"C30 Pickup\">C30 Pickup<\/option>\n                                                        <option value=\"C35\">C35<\/option>\n                                                        <option value=\"C35\/C3500 Pickup\">C35\/C3500 Pickup<\/option>\n                                                        <option value=\"C3500\">C3500<\/option>\n                                                        <option value=\"Canyon\">Canyon<\/option>\n                                                        <option value=\"Canyon AT4X AEV\">Canyon AT4X AEV<\/option>\n                                                        <option value=\"Chevy Pickup\">Chevy Pickup<\/option>\n                                                        <option value=\"Colorado\">Colorado<\/option>\n                                                        <option value=\"Colorado ZR2 Bison\">Colorado ZR2 Bison<\/option>\n                                                        <option value=\"Comanche\">Comanche<\/option>\n                                                        <option value=\"D21\">D21<\/option>\n                                                        <option value=\"Dakota\">Dakota<\/option>\n                                                        <option value=\"Equator\">Equator<\/option>\n                                                        <option value=\"F-150\">F-150<\/option>\n                                                        <option value=\"F-150 Heritage\">F-150 Heritage<\/option>\n                                                        <option value=\"F-150 Lightning\">F-150 Lightning<\/option>\n                                                        <option value=\"F-150 Raptor\">F-150 Raptor<\/option>\n                                                        <option value=\"F-150 SVT Raptor\">F-150 SVT Raptor<\/option>\n                                                        <option value=\"F-250\">F-250<\/option>\n                                                        <option value=\"F-250 Super Duty\">F-250 Super Duty<\/option>\n                                                        <option value=\"F-350\">F-350<\/option>\n                                                        <option value=\"F-350 Super Duty\">F-350 Super Duty<\/option>\n                                                        <option value=\"F-450 Super Duty\">F-450 Super Duty<\/option>\n                                                        <option value=\"Frontier\">Frontier<\/option>\n                                                        <option value=\"Gladiator\">Gladiator<\/option>\n                                                        <option value=\"Hilux\">Hilux<\/option>\n                                                        <option value=\"Hombre\">Hombre<\/option>\n                                                        <option value=\"Jimmy\">Jimmy<\/option>\n                                                        <option value=\"K10 Pickup\">K10 Pickup<\/option>\n                                                        <option value=\"K15\">K15<\/option>\n                                                        <option value=\"K15\/K1500 Pickup\">K15\/K1500 Pickup<\/option>\n                                                        <option value=\"K1500\">K1500<\/option>\n                                                        <option value=\"K20 Pickup\">K20 Pickup<\/option>\n                                                        <option value=\"K25\">K25<\/option>\n                                                        <option value=\"K25\/K2500 Pickup\">K25\/K2500 Pickup<\/option>\n                                                        <option value=\"K2500\">K2500<\/option>\n                                                        <option value=\"K30 Pickup\">K30 Pickup<\/option>\n                                                        <option value=\"K35\">K35<\/option>\n                                                        <option value=\"K35\/K3500 Pickup\">K35\/K3500 Pickup<\/option>\n                                                        <option value=\"K3500\">K3500<\/option>\n                                                        <option value=\"K5 Blazer\">K5 Blazer<\/option>\n                                                        <option value=\"Maverick\">Maverick<\/option>\n                                                        <option value=\"Pickup\">Pickup<\/option>\n                                                        <option value=\"Ram 1500\">Ram 1500<\/option>\n                                                        <option value=\"Ram 2500\">Ram 2500<\/option>\n                                                        <option value=\"Ram 3500\">Ram 3500<\/option>\n                                                        <option value=\"Ramcharger\">Ramcharger<\/option>\n                                                        <option value=\"Ranger\">Ranger<\/option>\n                                                        <option value=\"Ridgeline\">Ridgeline<\/option>\n                                                        <option value=\"S10\">S10<\/option>\n                                                        <option value=\"S15\">S15<\/option>\n                                                        <option value=\"Scout\">Scout<\/option>\n                                                        <option value=\"Scout II\">Scout II<\/option>\n                                                        <option value=\"Sierra\">Sierra<\/option>\n                                                        <option value=\"Sierra 1500\">Sierra 1500<\/option>\n                                                        <option value=\"Sierra 1500 Classic\">Sierra 1500 Classic<\/option>\n                                                        <option value=\"Sierra 1500 HD\">Sierra 1500 HD<\/option>\n                                                        <option value=\"Sierra 1500 HD Classic\">Sierra 1500 HD Classic<\/option>\n                                                        <option value=\"Sierra 2500\">Sierra 2500<\/option>\n                                                        <option value=\"Sierra 2500 HD\">Sierra 2500 HD<\/option>\n                                                        <option value=\"Sierra 2500 HD Classic\">Sierra 2500 HD Classic<\/option>\n                                                        <option value=\"Sierra 3500\">Sierra 3500<\/option>\n                                                        <option value=\"Sierra 3500 Classic\">Sierra 3500 Classic<\/option>\n                                                        <option value=\"Sierra 3500 HD\">Sierra 3500 HD<\/option>\n                                                        <option value=\"Silverado\">Silverado<\/option>\n                                                        <option value=\"Silverado 1500\">Silverado 1500<\/option>\n                                                        <option value=\"Silverado 1500 Classic\">Silverado 1500 Classic<\/option>\n                                                        <option value=\"Silverado 1500 HD\">Silverado 1500 HD<\/option>\n                                                        <option value=\"Silverado 1500 HD Classic\">Silverado 1500 HD Classic<\/option>\n                                                        <option value=\"Silverado 2500\">Silverado 2500<\/option>\n                                                        <option value=\"Silverado 2500 HD\">Silverado 2500 HD<\/option>\n                                                        <option value=\"Silverado 2500 HD Classic\">Silverado 2500 HD Classic<\/option>\n                                                        <option value=\"Silverado 3500\">Silverado 3500<\/option>\n                                                        <option value=\"Silverado 3500 Classic\">Silverado 3500 Classic<\/option>\n                                                        <option value=\"Silverado 3500 HD\">Silverado 3500 HD<\/option>\n                                                        <option value=\"Sonoma\">Sonoma<\/option>\n                                                        <option value=\"T100\">T100<\/option>\n                                                        <option value=\"Tacoma\">Tacoma<\/option>\n                                                        <option value=\"Titan\">Titan<\/option>\n                                                        <option value=\"Titan XD\">Titan XD<\/option>\n                                                        <option value=\"Trailduster\">Trailduster<\/option>\n                                                        <option value=\"Tundra\">Tundra<\/option>\n                                                    <\/select>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div id=\"step-1-controls\" class=\"hidden\">\n                <div class=\"w-full flex flex-row justify-end mt-4\">\n                    <div data-js=\"next\" class=\"btn btn--ghost-primary text-primary bg-transparent\">Next<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div id=\"step-2\" class=\"hidden\">\n            <div class=\"grid grid-cols-1 \">\n                <div>\n                    <legend class=\"w-full text-center md:text-left\">Add Photos<\/legend>\n                    <div data-js=\"community-upload-repeater\" class=\"flex flex-wrap\"> <!-- childNodes are dynamically created --><\/div>\n<div>\n    <div data-js=\"add-repeater\" class=\"btn btn--ghost-primary hidden my-12 \">Add Another Image +<\/div>\n<\/div>\n\n<template id=\"repeater-photo-template\">\n    <div data-js=\"community-upload-field\" class=\"\">\n        <div \n            data-js=\"input-emulator\" \n            style=\"border: 2px solid #ccc;\" \n            class=\"\n                bg-[rgba(0,0,0,0.05)] \n                mx-4\n                my-4\n                aspect-square\n                w-[250px]\n                h-[250px] \n                cursor-pointer\n                text-center\n                heading-font\n                uppercase\n                flex items-center justify-center\n                hover:bg-[rgba(0,0,0,0.15)] \n                transition-all\n            \"><span>Upload a photo +<\/span><\/div>\n        <input type=\"file\" name=\"photos[]\" class=\"hidden\"\/>\n    <\/div>\n<\/template>\n\n<script>\n    (function() {\n        const DOM = {\n            addButton: document.querySelector('[data-js=\"add-repeater\"]'),\n            repeater: document.querySelector('[data-js=\"community-upload-repeater\"]'),\n            template: document.getElementById('repeater-photo-template')\n        };\n\n        if (DOM.repeater.ready) {\n            return;\n        }\n\n        DOM.repeater.ready = true;\n\n        DOM.repeater.addEventListener('DOMNodeRemoved', function(e) {\n        });\n\n        DOM.addButton.addEventListener('click', function() {\n            const clone = DOM.template.content.cloneNode(true);\n            initEmulator(clone.querySelector('[data-js=\"input-emulator\"]'));\n            DOM.repeater.appendChild(clone);\n            \/\/ click the emulator\n            DOM.repeater.lastElementChild.querySelector('[data-js=\"input-emulator\"]').click();\n        });\n\n        const template = ({e}) =>`\n        <div class=\"!w-[250px] !h-[250px] overflow-hidden my-4 mx-4 relative\">\n            <img decoding=\"async\" src=\"${e.target.result}\" class=\"!w-full !h-full object-cover object-center\"\/>\n            <div class=\"absolute top-0 right-0 p-2\">\n                <div class=\"btn btn--xs btn--black text-black bg-white bg-transparent\" onclick=\"javascript: eventEmitter.emit('photo-remove', this)\">x<\/div>\n            <\/div>\n        <\/div>\n        `;\n\n        eventEmitter.on('photo-remove', (elem) => {\n            const parent = elem.closest('[data-js=\"community-upload-field\"]');\n            if (!parent) {\n                return;\n            }\n            parent.remove();\n            setTimeout(() => {\n                if (DOM.repeater.querySelectorAll('[data-js=\"community-upload-field\"]').length < 1) {\n                    DOM.addButton.classList.add('hidden');\n                    addUploadField();\n                }\n            }, 100);\n        })\n\n        const initEmulator = (elem) => {\n            if (elem.ready) return;\n            elem.ready = true;\n            elem.addEventListener('click', function(e) {\n\n                if (e.target.closest('.btn')) {\n                    return;\n                }\n\n                this.nextElementSibling.click();\n\n                this.nextElementSibling.addEventListener('change', function() {\n                    const fileExtension = this.files[0].name.split('.').pop().toLowerCase();\n                    const imageFileExtensions = [\n                        'jpg',\n                        'jpeg',\n                        'png',\n                        'gif'\n                    ];\n\n                    if (!imageFileExtensions.includes(fileExtension)) {\n                        alert('Filetype not supported. Please upload a jpg, jpeg, png, or gif.');\n                        return;\n                    }\n\n                    \/\/ check if the input is an image\n                    if(this.files && this.files[0]) {\n                        var reader = new FileReader();\n                        console.log('READER', reader);\n\n                        reader.onload = function(e) {\n                            const fileSize = this.files[0].size;\n                            if (fileSize > 10000000) {\n                                alert('File size too large. Please upload a file less than 10MB.');\n                                return;\n                            }\n                            this.previousElementSibling.innerHTML = template({e});\n                            this.previousElementSibling.classList.remove('bg-[rgba(0,0,0,0.05)]');\n                            if (!this.previousElementSibling.classList.contains('has-image')) {\n                                addUploadField();\n                            }\n                            this.previousElementSibling.classList.add('has-image');\n                        }.bind(this);\n                        reader.readAsDataURL(this.files[0]);\n                    }\n                });\n            });\n\n        }\n\n\n        function addUploadField() {\n            const clone = DOM.template.content.cloneNode(true);\n            initEmulator(clone.querySelector('[data-js=\"input-emulator\"]'));\n            DOM.repeater.appendChild(clone);\n        }\n\n        addUploadField();\n\n    })();\n<\/script>                <\/div>\n            <\/div>\n            <div id=\"step-2-controls\">\n                <div class=\"w-full flex flex-row md:justify-end justify-center mt-4\">\n                    <div data-js=\"previous\" class=\"btn btn--ghost-primary text-primary bg-transparent mr-2\">Previous<\/div>\n                    <div data-js=\"next\" class=\"btn btn--ghost-primary text-primary bg-transparent\">Next<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div id=\"step-3\" class=\"hidden\">\n            <div class=\"grid grid-cols-1 \">\n                <div>\n                    <legend>Add Products<\/legend>\n                    <div data-js=\"community-upload-products-repeater\" class=\"flex flex-col\"> <!-- childNodes are dynamically created --><\/div>\n<div class=\"my-2 py-4\">\n    <textarea name=\"content\"  \n    style=\"border: 2px solid #ccc\"\n    class=\"p-4 text-lg w-full min-h-[300px]\" placeholder=\"Tell us why you love it!\"><\/textarea>\n<\/div>\n<div>\n    <div data-js=\"add-repeater-product\" class=\"btn btn--ghost-primary my-12 \">Add Another Product +<\/div>\n<\/div>\n\n<template id=\"repeater-products-template\">\n    <div data-js=\"community-upload-products-field\" class=\"my-2\" >\n        <div class=\"flex flex-row\">\n            <select name=\"products[]\" data-js=\"community-products-selector\" class=\"w-full mr-4\"><\/select>\n            <div class=\"flex items-center justify-center\">\n                <div class=\"btn !flex btn--primary items-center justify-center h-full w-full font-normal\" data-js=\"remove-product\">X<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/template>\n\n<script>\n    (function($) {\n        const DOM = {\n            formParent: document.getElementById('bpag-community-submit-form-parent'),\n            repeater: document.querySelector('[data-js=\"community-upload-products-repeater\"]'),\n            selectors: () => document.querySelectorAll('[data-js=\"community-products-selector\"]'),\n            template: document.getElementById('repeater-products-template'),\n            addButton: document.querySelector('[data-js=\"add-repeater-product\"]'),\n        };\n\n        if (DOM.repeater.ready) {\n            return;\n        }\n\n\n        $('body').on('click', '[data-js=\"remove-product\"]', function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            $(this).closest('[data-js=\"community-upload-products-field\"]').remove();\n        });\n\n\n        DOM.repeater.ready = true;\n\n        let products = [];\n        eventEmitter.on('update-products', function(){\n            console.log('here!!!!!');\n            try {\n                const urlParams = new URLSearchParams();\n                const year = DOM.formParent.querySelector('[name=\"year\"]').value;\n                const make = DOM.formParent.querySelector('[name=\"make\"]').value;\n                const model = DOM.formParent.querySelector('[name=\"model\"]').value;\n\n                console.log({\n                    year, make, model\n                });\n                if (!year || !make || !model) {\n                    return;\n                }\n\n                urlParams.append('year', year);\n                urlParams.append('make', make);\n                urlParams.append('model', model);\n\n                fetch(`\/wp-json\/bpag-community\/v1\/products-from-ymm?${urlParams.toString()}`)\n                    .then(response => response.json())\n                    .then(data => {\n                        data.unshift({id: '', name: 'Select a Product'});\n                        const options = data.map(product => `<option value=\"${product.id}\">${product.name}<\/option>`);\n                        products = data;\n                        DOM.selectors().forEach(selector => {\n                            if(selector.ready) {\n                                return;\n                            }\n                            selector.ready = true;\n                            selector.innerHTML = options.join('');\n                        });\n                    });\n            } catch (error) {\n                console.log(error);\n            }\n        })\n\n        DOM.repeater.addEventListener('DOMNodeRemoved', function(e) {\n        });\n\n        DOM.addButton.addEventListener('click', function() {\n            const clone = DOM.template.content.cloneNode(true);\n            DOM.repeater.appendChild(clone);\n            eventEmitter.emit('update-products');\n        });\n\n        function addField() {\n            const clone = DOM.template.content.cloneNode(true);\n            DOM.repeater.appendChild(clone);\n        }\n\n        addField();\n\n    })(jQuery);\n<\/script>\n                <\/div>\n            <\/div>\n            <div id=\"step-3-controls\">\n                <div class=\"w-full flex flex-row justify-end mt-4\">\n                    <div data-js=\"previous\" class=\"btn btn--ghost-primary text-primary bg-transparent mr-2\">Previous<\/div>\n                    <div data-js=\"submit\" class=\"btn btn--primary\">Submit<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"form-loader absolute inset-0 z-10 bg-white hidden pointer-events-all\">\n            <div class=\"flex flex-col items-center justify-center w-full h-full\">\n                <div class=\"animate-pulse text-center heading-font uppercase text-xl\">Uploading...<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"form-success absolute inset-0 z-10 bg-white hidden pointer-events-all\">\n            <div class=\"flex flex-col items-center justify-center w-full h-full\">\n                <div class=\"text-center heading-font uppercase text-xl\">Success!<\/div>\n            <\/div>\n        <\/div>\n    <\/form>\n    <!-- \/ steps -->\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69c35b0 elementor-widget elementor-widget-bpag-community-uploads\" data-id=\"69c35b0\" data-element_type=\"widget\" data-widget_type=\"bpag-community-uploads.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"max-w-[1600px] mx-auto w-full\">\n    <h2 class=\"my-12 md:text-3xl\">Recent Builds<\/h2>\n    <div class=\"grid grid-cols-1 gap-4 md:gap-8 md:grid-cols-3\">\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/derek-nguyen\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/11\/bpag-community-uploads\/6914e0bbf0211.jpeg\" alt=\"Derek Nguyen\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">Derek Nguyen<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/todd-bruce\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/11\/bpag-community-uploads\/690bc2af887ed.jpg\" alt=\"Todd Bruce\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">Todd Bruce<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/mathis-buddelmann\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/11\/bpag-community-uploads\/690b1a1f7ec27.jpeg\" alt=\"Mathis Buddelmann\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">Mathis Buddelmann<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/hugo-pare\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/10\/bpag-community-uploads\/68e25e52a7fb2.jpg\" alt=\"HUGO PAR\u00c9\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">HUGO PAR\u00c9<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/logan-drake\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/10\/bpag-community-uploads\/68e0b99557969.jpeg\" alt=\"Logan Drake\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">Logan Drake<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/jason-spencer\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/09\/bpag-community-uploads\/68c80063071da.jpeg\" alt=\"Jason Spencer\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">Jason Spencer<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/matt-krobthong\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/09\/bpag-community-uploads\/68be6f1f7eb5a.jpeg\" alt=\"Matt Krobthong\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">Matt Krobthong<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/d-davies\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/07\/bpag-community-uploads\/6884db2b1103c.jpeg\" alt=\"D Davies\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">D Davies<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/david-nekula\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/07\/bpag-community-uploads\/687436c9b29e9.jpg\" alt=\"DAVID NEKULA\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">DAVID NEKULA<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/daniel-anderson\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/06\/bpag-community-uploads\/6859c5f3cc181.jpeg\" alt=\"Daniel Anderson\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">Daniel Anderson<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/d-riz\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/06\/bpag-community-uploads\/684ef9a50ea80.jpeg\" alt=\"D Riz\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">D Riz<\/div>\n        <\/div>\n                <div class=\"my-4\">\n            <a href=\"https:\/\/softopper.com\/user-upload\/eric-gillard\/\" class=\"relative\">\n                <figure style=\"aspect-ratio: 1.4\/1\" class=\"m-0 p-0 block w-full h-auto\">\n                    <img decoding=\"async\" src=\"https:\/\/softopper.com\/wp-content\/uploads\/2025\/06\/bpag-community-uploads\/684b16b594401.jpg\" alt=\"Eric Gillard\" class=\"object-cover w-full !h-full\" \/>\n                <\/figure>\n            <\/a>\n            <div class=\"w-full py-6 text-lg md:text-xl heading-font\">Eric Gillard<\/div>\n        <\/div>\n            <\/div>\n        <div id=\"load-more-parent\">\n        <div class=\"my-8 flex items-center justify-center\">\n            <button \n                hx-trigger=\"click\" \n                hx-get=\"\/wp-json\/bpag-community\/v1\/top-builds?page=2\"\n                hx-target=\"#load-more-parent\"  \n                hx-swap=\"outerHTML\"\n                class=\"btn btn--ghost-primary btn--lg\">Load More<\/button>\n        <\/div>\n    <\/div>\n    <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Top Builds Community Top Builds Recent Posts Upload My Build Step 1 Your Info Step 2 Add Photos Step 3 Add Products Your Info First Name Last Name Email Select Your Vehicle Year Year20252024202320222021202020192018201720162015201420132012201120102009200820072006200520042003200220012000199919981997199619951994199319921991199019891988198719861985198419831982198119801979197819771976197519741973197219711970196919681967196619651964196319621961 Make MakeChevroletDodgeFordGMCHondaInternationalIsuzuJeepMazdaNissanPlymouthRamSuzukiToyota Model Model15001500 Classic250035004RunnerB2000B2200B2300B2500B2600B3000B4000BlazerBroncoC10 PickupC15C15\/C1500 PickupC1500C20 PickupC25C25\/C2500 PickupC2500C30 PickupC35C35\/C3500 PickupC3500CanyonColoradoComancheD21DakotaEquatorF-150F-150 HeritageF-150 LightningF-150 RaptorF-150 SVT RaptorF-250F-250 Super DutyF-350F-350 Super DutyF-450 Super [&hellip;]<\/p>\n","protected":false},"author":14234,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"search_category":[],"class_list":["post-60374","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/softopper.com\/wp-json\/wp\/v2\/pages\/60374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softopper.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/softopper.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/softopper.com\/wp-json\/wp\/v2\/users\/14234"}],"replies":[{"embeddable":true,"href":"https:\/\/softopper.com\/wp-json\/wp\/v2\/comments?post=60374"}],"version-history":[{"count":0,"href":"https:\/\/softopper.com\/wp-json\/wp\/v2\/pages\/60374\/revisions"}],"wp:attachment":[{"href":"https:\/\/softopper.com\/wp-json\/wp\/v2\/media?parent=60374"}],"wp:term":[{"taxonomy":"search_category","embeddable":true,"href":"https:\/\/softopper.com\/wp-json\/wp\/v2\/search_category?post=60374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}