<%
    const t = (key) =>
        (typeof Craft !== 'undefined' && Craft.t)
            ? Craft.t('freeform', key)
            : key;

    const cardLabel       = t('Card');
    const paypalLabel     = t('PayPal');
    const googlePayLabel  = t('Google Pay');
    const applePayLabel   = t('Apple Pay');

    const cardNumberLabel = t('Card number');
    const expiryLabel     = t('Expiry');
    const cvcLabel        = t('CVC');
    const countryLabel    = t('Country');

    const expiryPh        = t('MM/YY');
    const cvcPh           = t('CVC');
    const selectLabel     = t('Select');
%>

<div class="stripe-demo">
    <ul>
        <li class="selected">
            <span class="icon-container">
                <svg class="p-Icon p-Icon--card Icon p-Icon--md p-TabIcon TabIcon p-TabIcon--selected TabIcon--selected" role="presentation" fill="var(--colorIcon)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 4a2 2 0 012-2h12a2 2 0 012 2H0zm0 2v6a2 2 0 002 2h12a2 2 0 002-2V6H0zm3 5a1 1 0 011-1h1a1 1 0 110 2H4a1 1 0 01-1-1z"></path></svg>
            </span>
            <label><%= cardLabel %></label>
        </li>
        <li>
            <span class="icon-container">
                <img src="https://js.stripe.com/v3/fingerprinted/img/payment-methods/icon-pm-paypal-0383a0ae3febbf0c0d8e721737884ab0.svg" alt="">
            </span>
            <label><%= paypalLabel %></label>
        </li>
        <li>
            <span class="icon-container">
                <svg viewBox="0 0 30 16" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" class="p-Logo p-Logo--md p-TabIcon TabIcon"><path d="M22.021 0H7.98C3.59 0 0 3.6 0 8s3.59 8 7.979 8H22.02C26.41 16 30 12.4 30 8s-3.59-8-7.979-8Z" fill="#fff"></path><path d="M22.021.648c.986 0 1.943.196 2.845.58a7.395 7.395 0 0 1 3.91 3.92c.382.904.578 1.864.578 2.852 0 .988-.196 1.948-.579 2.852a7.417 7.417 0 0 1-3.91 3.92c-.9.384-1.858.58-2.844.58H7.98a7.221 7.221 0 0 1-2.845-.58 7.395 7.395 0 0 1-3.91-3.92A7.274 7.274 0 0 1 .647 8c0-.988.196-1.948.579-2.852a7.417 7.417 0 0 1 3.91-3.92 7.221 7.221 0 0 1 2.844-.58H22.02Zm0-.648H7.98C3.59 0 0 3.6 0 8s3.59 8 7.979 8H22.02C26.41 16 30 12.4 30 8s-3.59-8-7.979-8Z" fill="#3C4043"></path><path d="M14.306 8.568v2.42h-.766V5.012h2.03c.515 0 .954.172 1.313.516.367.344.55.764.55 1.26 0 .508-.183.928-.55 1.268-.355.34-.794.508-1.313.508h-1.264v.004Zm0-2.82v2.084h1.28c.304 0 .559-.104.758-.308.204-.204.307-.452.307-.732a.998.998 0 0 0-.307-.724.992.992 0 0 0-.758-.316h-1.28v-.004ZM19.436 6.764c.567 0 1.014.152 1.34.456.328.304.491.72.491 1.248v2.52h-.73v-.568h-.032c-.315.468-.738.7-1.264.7-.451 0-.826-.132-1.13-.4a1.279 1.279 0 0 1-.454-1c0-.424.16-.76.479-1.008.319-.252.746-.376 1.276-.376.455 0 .83.084 1.121.252v-.176a.873.873 0 0 0-.315-.68 1.08 1.08 0 0 0-.742-.28c-.427 0-.766.18-1.013.544l-.674-.424c.37-.54.921-.808 1.647-.808Zm-.99 2.968c0 .2.085.368.256.5.168.132.367.2.595.2.323 0 .61-.12.861-.36.252-.24.38-.52.38-.844-.24-.188-.571-.284-.998-.284-.311 0-.57.076-.778.224-.211.156-.315.344-.315.564ZM25.432 6.896l-2.553 5.888h-.79l.95-2.06-1.684-3.828h.834L23.4 9.832h.016l1.181-2.936h.834Z" fill="#3C4043"></path><path d="M11.26 8.08c0-.25-.023-.49-.065-.72h-3.21v1.32h1.849c-.075.44-.317.814-.686 1.063v.857h1.1c.643-.597 1.011-1.478 1.011-2.52Z" fill="#4285F4"></path><path d="M9.149 9.743c-.306.207-.701.329-1.163.329-.891 0-1.648-.603-1.918-1.415H4.931v.883a3.417 3.417 0 0 0 3.054 1.888c.924 0 1.7-.305 2.263-.829l-1.1-.856Z" fill="#34A853"></path><path d="M5.96 8.002c0-.228.038-.448.107-.656v-.883H4.93a3.416 3.416 0 0 0-.363 1.539c0 .554.131 1.076.363 1.539l1.136-.883a2.071 2.071 0 0 1-.107-.656Z" fill="#FABB05"></path><path d="M7.986 5.932c.504 0 .955.174 1.312.514l.975-.977a3.279 3.279 0 0 0-2.287-.893 3.417 3.417 0 0 0-3.054 1.887l1.135.883c.271-.812 1.028-1.414 1.92-1.414Z" fill="#E94235"></path></svg>
            </span>
            <label><%= googlePayLabel %></label>
        </li>
        <li>
            <span class="icon-container">
                <svg class="SVGInline-svg SVGInline--cleaned-svg SVG-svg BrandIcon-svg BrandIcon--size--32-svg" height="32" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#F6F8FA" d="M0 0h32v32H0z"></path><path d="M26.672 8H5.328c-.163 0-.327.002-.49.004a3.265 3.265 0 0 0-.49.043 1.56 1.56 0 0 0-1.148.837c-.076.149-.124.3-.153.464a3.442 3.442 0 0 0-.043.49L3 10.06v12.255c0 .164.002.328.004.492.004.163.014.328.043.489a1.562 1.562 0 0 0 .837 1.148c.149.076.3.124.464.153a3.3 3.3 0 0 0 .49.044l.223.003h21.877l.226-.003c.162-.005.326-.015.488-.044a1.65 1.65 0 0 0 .465-.153c.295-.15.534-.389.683-.683.074-.147.126-.304.153-.466.027-.161.041-.324.043-.488.002-.075.003-.149.003-.224l.001-.268V10.062c0-.075-.002-.15-.004-.225a3.243 3.243 0 0 0-.043-.489 1.567 1.567 0 0 0-1.3-1.301 3.274 3.274 0 0 0-.49-.043L26.938 8h-.266Z" fill="#000"></path><path d="M26.672 8.555h.262c.071 0 .143.002.215.004.123.003.27.009.405.034.118.022.217.053.312.103a1.004 1.004 0 0 1 .54.751c.025.134.032.28.035.405l.004.214v12.515c0 .07-.002.141-.004.212 0 .136-.012.272-.034.406a1.08 1.08 0 0 1-.102.311.996.996 0 0 1-.44.44c-.098.05-.202.084-.31.102a2.822 2.822 0 0 1-.404.035 8.19 8.19 0 0 1-.217.002H5.064c-.071 0-.143 0-.212-.002a2.832 2.832 0 0 1-.406-.035 1.087 1.087 0 0 1-.312-.102.995.995 0 0 1-.44-.44 1.09 1.09 0 0 1-.102-.312 2.744 2.744 0 0 1-.033-.405 10.392 10.392 0 0 1-.004-.213V10.066c0-.072.001-.143.004-.215.003-.124.01-.269.034-.405.018-.108.052-.213.102-.31a.998.998 0 0 1 .44-.441 1.11 1.11 0 0 1 .311-.103c.135-.02.27-.032.406-.033l.213-.004h21.607Z" fill="#fff"></path><path d="M10.098 13.599c.223-.28.373-.652.333-1.035-.325.016-.723.214-.953.494-.207.238-.39.628-.342.994.366.032.731-.183.962-.453Zm.33.524c-.531-.032-.984.302-1.237.302-.254 0-.643-.286-1.063-.278a1.567 1.567 0 0 0-1.331.81c-.571.983-.151 2.442.404 3.244.27.396.594.833 1.022.817.405-.016.564-.26 1.055-.26s.634.26 1.062.252c.444-.008.722-.396.991-.793.31-.453.437-.889.444-.913-.007-.007-.857-.333-.864-1.308-.007-.818.666-1.206.699-1.23-.382-.563-.976-.627-1.183-.642m4.626-1.106c1.155 0 1.959.796 1.959 1.955 0 1.162-.82 1.963-1.988 1.963h-1.278v2.032h-.924v-5.95h2.231Zm-1.307 3.143h1.06c.804 0 1.261-.433 1.261-1.184 0-.75-.457-1.18-1.257-1.18h-1.064v2.364Zm3.508 1.574c0-.759.581-1.224 1.612-1.282l1.187-.07v-.334c0-.482-.326-.771-.87-.771-.515 0-.837.247-.915.635h-.84c.049-.784.716-1.362 1.788-1.362 1.052 0 1.724.557 1.724 1.428v2.99h-.853v-.714h-.02c-.252.483-.802.788-1.37.788-.85 0-1.443-.528-1.443-1.308Zm2.8-.39v-.343l-1.069.065c-.53.037-.832.273-.832.644 0 .38.313.627.791.627.623 0 1.11-.428 1.11-.994Zm1.692 3.22v-.722c.066.017.215.017.289.017.413 0 .635-.174.771-.619 0-.009.078-.264.078-.268l-1.566-4.342h.965l1.098 3.53h.016l1.097-3.53h.94l-1.625 4.565c-.37 1.052-.8 1.39-1.699 1.39a3.699 3.699 0 0 1-.363-.021Z" fill="#000"></path></svg>
            </span>
            <label><%= applePayLabel %></label>
        </li>
    </ul>
    <div>
        <div class="cc-number">
            <label><%= cardNumberLabel %></label>
            <div>
                <input type="text" placeholder="1234 1234 1234 1234" />
            </div>
        </div>
        <div class="expiry">
            <label><%= expiryLabel %></label>
            <div>
                <input type="text" placeholder="<%= expiryPh %>" />
            </div>
        </div>
        <div class="cvc">
            <label><%= cvcLabel %></label>
            <div>
                <input type="text" placeholder="<%= cvcPh %>" />
            </div>
        </div>
        <div class="country">
            <label><%= countryLabel %></label>
            <div>
                <select>
                    <option value="US"><%= selectLabel %></option>
                </select>
            </div>
        </div>
    </div>
</div>
