<commit_before>import React             from 'react';
import { SeparatorLine } from '../../_common/components/separator_line.jsx';
import Step              from '../../_common/components/step.jsx';

const Box = ({
    gr,
    text,
    icon,
    href,
    download,
    target,
    padding,
}) => (
    <div className={`${gr ? `${gr} gr-12-m` : 'gr-6 gr-12-m'} box-container ${icon ? `${padding ? `gr-padding-${padding}` : ''}` : 'padding'}`}>
        <div className='box bordered'>
            <div className='items'>
                { icon &&
                    <div><img className='' src={it.url_for(icon)} /></div>
                }
                { href ?
                    <div className='box-item-end'>
                        <a
                            href={href}
                            target={target || undefined}
                            download={!!download}
                            rel={/^http/.test(href) ? 'noopener noreferrer' : undefined}
                        >
                            <p className='center-text'>{text}</p>
                        </a>
                    </div>
                    :
                    <p className='center-text'>{text}</p>
                }
            </div>
        </div>
    </div>
);

const ColumnSM = ({ gr, header, paragraph }) => (
    <div className={`gr-${gr ? `${gr} gr-12-m` : '3 gr-12-m'}`}>
        <h4>{header}</h4>
        <SeparatorLine no_wrapper sub_class='header-line' />
        <p className='column-margin'>{paragraph}</p>
    </div>
);

const ColumnValues = ({ gr, icon, header }) => (
    <div className={`gr-${gr ? `${gr} gr-12-m` : '3 gr-6-p gr-12-m'}`}>
        <div className='values-box'>
            <img className='responsive values-box-icon' src={it.url_for(`images/pages/careers/${icon}.svg`)} />
            <div className='fill-text'>
                <h4 className='values-box-subheader'>{header}</h4>
            </div>
        </div>
    </div>
);

const ColumnLG = ({ center, image, text, link, margin_top }) => (
    <div className={`gr-4 gr-12-m${center ? ' center-text' : ''}${margin_top ? ' col-margin-top' : ''}`}>
        <div>
            <p className='column-margin'>{text}</p>
        </div>
        <img className='responsive' src={it.url_for(`images/pages/careers/${image}.jpg`)} />
        {!!link &&
            <div className='fill-text'>
                <a href={link}><span>{it.L('Learn more')}</span></a>
            </div>
        }
    </div>
);

const CareerStep = ({ ...props }) => (
    <Step centered={false} {...props} />
);

const Careers = () => {
    const url_open_positions = it.url_for('open-positions/job-details');

    return (
        <div className='static_full career'>
            <div className='top-banner'>
                <div className='banner-caption'>
                    <div className='caption-text'>
                        <h1>{it.L('Imagine')}</h1>
                        <p>{it.L('Imagine a workplace where your individuality, creativity and sense of adventure are valued and rewarded.')}</p>
                    </div>
                </div>
            </div>
            <div className='margin-top-100'>
                <div className='container gr-row gr-padding-30'>
                    <ColumnSM header={it.L('Ideas')}    paragraph={it.L('Where new ideas trump safe, old ones. And you\'re free to work your way, free from hierarchies and red tape.')} />
                    <ColumnSM header={it.L('Freedom')}  paragraph={it.L('Where your experience, drive and talent can propel you in unknown directions. And you have the freedom to push into new frontiers.')} />
                    <ColumnSM header={it.L('Teamwork')} paragraph={it.L('Where teamwork and a collaborative culture form the platform for personal and corporate growth.')} />
                    <ColumnSM header={it.L('Support')}  paragraph={it.L('Where supportive colleagues are like a second family.')} />
                </div>

                <div className='container gr-row'>
                    <div className='gr-12'>
                        <SeparatorLine no_wrapper sub_class='gr-padding-10' />
                    </div>
                </div>

                <div className='values-group'>
                    <div className='container gr-row gr-padding-10 center-text'>
                        <div className='gr-12 gr-padding-30'>
                            <h1>{it.L('Our values')}</h1>
                        </div>

                        <ColumnValues header={it.L('Integrity')} icon='ic-intergrity' />
                        <ColumnValues header={it.L('Teamwork')} icon='ic-teamwork' />
                        <ColumnValues header={it.L('Competence')} icon='ic-competence' />
                        <ColumnValues header={it.L('Customer focus')} icon='ic-customer-focus' />

                        <div className='fill-text center-element btn-margin-top'>
                            <a className='button-secondary' href={it.url_for('about-us?anchor=our-values')}>
                                <span>{it.L('Learn more')}</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div className='fill-bg-color location-section'>
                    <div className='container gr-row gr-padding-20 center-text'>
                        <div className='gr-12 gr-padding-20'>
                            <h1>{it.L('Our locations')}</h1>
                        </div>
                        <ColumnLG image='malta2x'    text={it.L('Malta')}                       link={it.url_for('malta')} />
                        <ColumnLG image='my2x'       text={it.L('Cyberjaya, Malaysia')}         link={it.url_for('cyberjaya')} />
                        <ColumnLG image='labuan2x'   text={it.L('Labuan, Malaysia')}            link={it.url_for('labuan')} />
                        <ColumnLG image='asuncion2x' text={it.L('Asunción, Paraguay')}          link={it.url_for('asuncion')} margin_top={true} />
                        <ColumnLG image='dubai2x'    text={it.L('Dubai, United Arab Emirates')} link={it.url_for('dubai')}    margin_top={true} />
                    </div>
                </div>
<commit_msg>Update code in accordance to Style Guide<commit_after>import React             from 'react';
import { SeparatorLine } from '../../_common/components/separator_line.jsx';
import Step              from '../../_common/components/step.jsx';

const Box = ({
    gr,
    text,
    icon,
    href,
    download,
    target,
    padding,
}) => (
    <div className={`${gr ? `${gr} gr-12-m` : 'gr-6 gr-12-m'} box-container ${icon ? `${padding ? `gr-padding-${padding}` : ''}` : 'padding'}`}>
        <div className='box bordered'>
            <div className='items'>
                { icon &&
                    <div><img className='' src={it.url_for(icon)} /></div>
                }
                { href ?
                    <div className='box-item-end'>
                        <a
                            href={href}
                            target={target || undefined}
                            download={!!download}
                            rel={/^http/.test(href) ? 'noopener noreferrer' : undefined}
                        >
                            <p className='center-text'>{text}</p>
                        </a>
                    </div>
                    :
                    <p className='center-text'>{text}</p>
                }
            </div>
        </div>
    </div>
);

const ColumnSM = ({ gr, header, paragraph }) => (
    <div className={`gr-${gr ? `${gr} gr-12-m` : '3 gr-12-m'}`}>
        <h4>{header}</h4>
        <SeparatorLine no_wrapper sub_class='header-line' />
        <p className='column-margin'>{paragraph}</p>
    </div>
);

const ColumnValues = ({ gr, icon, header }) => (
    <div className={`gr-${gr ? `${gr} gr-12-m` : '3 gr-6-p gr-12-m'}`}>
        <div className='values-box'>
            <img className='responsive values-box-icon' src={it.url_for(`images/pages/careers/${icon}.svg`)} />
            <div className='fill-text'>
                <h4 className='values-box-subheader'>{header}</h4>
            </div>
        </div>
    </div>
);

const ColumnLG = ({ center, image, text, link, margin_top }) => (
    <div className={`gr-4 gr-12-m${center ? ' center-text' : ''}${margin_top ? ' col-margin-top' : ''}`}>
        <div>
            <p className='column-margin'>{text}</p>
        </div>
        <img className='responsive' src={it.url_for(`images/pages/careers/${image}.jpg`)} />
        {!!link &&
            <div className='fill-text'>
                <a href={link}><span>{it.L('Learn more')}</span></a>
            </div>
        }
    </div>
);

const CareerStep = ({ ...props }) => (
    <Step centered={false} {...props} />
);

const Careers = () => {
    const url_open_positions = it.url_for('open-positions/job-details');

    return (
        <div className='static_full career'>
            <div className='top-banner'>
                <div className='banner-caption'>
                    <div className='caption-text'>
                        <h1>{it.L('Imagine')}</h1>
                        <p>{it.L('Imagine a workplace where your individuality, creativity and sense of adventure are valued and rewarded.')}</p>
                    </div>
                </div>
            </div>
            <div className='margin-top-100'>
                <div className='container gr-row gr-padding-30'>
                    <ColumnSM header={it.L('Ideas')}    paragraph={it.L('Where new ideas trump safe, old ones. And you\'re free to work your way, free from hierarchies and red tape.')} />
                    <ColumnSM header={it.L('Freedom')}  paragraph={it.L('Where your experience, drive and talent can propel you in unknown directions. And you have the freedom to push into new frontiers.')} />
                    <ColumnSM header={it.L('Teamwork')} paragraph={it.L('Where teamwork and a collaborative culture form the platform for personal and corporate growth.')} />
                    <ColumnSM header={it.L('Support')}  paragraph={it.L('Where supportive colleagues are like a second family.')} />
                </div>

                <div className='container gr-row'>
                    <div className='gr-12'>
                        <SeparatorLine no_wrapper sub_class='gr-padding-10' />
                    </div>
                </div>

                <div className='values-group'>
                    <div className='container gr-row gr-padding-10 center-text'>
                        <div className='gr-12 gr-padding-30'>
                            <h1>{it.L('Our values')}</h1>
                        </div>

                        <ColumnValues header={it.L('Integrity')} icon='ic-intergrity' />
                        <ColumnValues header={it.L('Teamwork')} icon='ic-teamwork' />
                        <ColumnValues header={it.L('Competence')} icon='ic-competence' />
                        <ColumnValues header={it.L('Customer focus')} icon='ic-customer-focus' />

                        <div className='fill-text center-element btn-margin-top'>
                            <a className='button-secondary' href={it.url_for('about-us?anchor=our-values')}>
                                <span>{it.L('Learn more')}</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div className='fill-bg-color location-section'>
                    <div className='container gr-row gr-padding-20 center-text'>
                        <div className='gr-12 gr-padding-20'>
                            <h1>{it.L('Our locations')}</h1>
                        </div>
                        <ColumnLG image='malta2x'    text={it.L('Malta')}                       link={it.url_for('malta')} />
                        <ColumnLG image='my2x'       text={it.L('Cyberjaya, Malaysia')}         link={it.url_for('cyberjaya')} />
                        <ColumnLG image='labuan2x'   text={it.L('Labuan, Malaysia')}            link={it.url_for('labuan')} />
                        <ColumnLG image='asuncion2x' text={it.L('Asunción, Paraguay')}          link={it.url_for('asuncion')} margin_top />
                        <ColumnLG image='dubai2x'    text={it.L('Dubai, United Arab Emirates')} link={it.url_for('dubai')}    margin_top />
                    </div>
                </div>

{'fraction_non_alphanumeric': 0.16375109833053758, 'fraction_numerical': 0.008786644300662992, 'mean_word_length': 1.5473041709053916, 'pattern_counts': {'":': 0, '<': 205, '<?xml version=': 0, '>': 217, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5922325', 'n_tokens_mistral': 3649, 'n_tokens_neox': 3468, 'n_words': 698}