<form id="form-services" class="form form--services js-parsley" action="https://formspree.io/{{ site.email.services }}" method="POST" accept-charset="UTF-8">

    <p class="form-group">
        <input class="form-control" type="text" id="name" name="name" required>
        <label class="form-label" for="name">Full Name</label>
    </p>

    <div class="grid grid--full grid-small--half">
        <div class="grid__col">
            <p class="form-group">
                <input class="form-control" type="text" id="company" name="company" required>
                <label class="form-label" for="company">Company</label>
            </p>
        </div>
        <div class="grid__col">
            <p class="form-group">
                <input class="form-control" type="email" id="email" name="_replyto" required>
                <label class="form-label" for="email">Email</label>
            </p>
        </div>
        <div class="grid__col">
            <p class="form-group">
                <input class="form-control" type="tel" id="phone" name="phone">
                <label class="form-label" for="phone">Phone</label>
            </p>
        </div>
        <div class="grid__col">
            <p class="form-group">
                <select class="form-control" id="country" name="country" required data-required="true">
                    <option value="">&nbsp;</option>
                    <optgroup label="">
                        <option value="US">United States</option>
                        <option value="DE">Germany</option>
                        <option value="IN">India</option>
                        <option value="GB">United Kingdom</option>
                        <option value="CN">China</option>
                    </optgroup>
                    <option value="">&nbsp;</option>

                    {% for country in site.data.countries %}
                        {% unless country.cca2 == 'DE' or country.cca2 == 'US' or country.cca2 == 'IN' or country.cca2 == 'GB' or country.cca2 == 'CN' %}
                            <option value="{{ country.cca2 }}">{{ country.name.common }}</option>
                        {% endunless %}
                    {% endfor %}
                </select>
                <label class="form-label" for="country">Country</label>
            </p>
        </div>
        <div class="grid__col">
            <p class="form-group">
                <select class="form-control" id="industry" name="industry" required data-required="true">
                    <option value="">&nbsp;</option>
                    {% for industry in page.contact.industries %}
                        <option value="{{ industry }}">{{ industry }}</option>
                    {% endfor %}
                </select>
                <label class="form-label" for="industry">Industry</label>
            </p>
        </div>
        <div class="grid__col">
            <p class="form-group">
                <select class="form-control" id="interest" name="interest" required data-required="true">
                    <option value="">&nbsp;</option>
                    {% for interest in page.contact.interests %}
                        <option value="{{ interest }}">{{ interest }}</option>
                    {% endfor %}
                </select>
                <label class="form-label" for="interest">Interested in</label>
            </p>
        </div>
    </div>

    <p class="form-group">
        <textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
        <label class="form-label" for="comment">Comments</label>
    </p>
    <p class="form-group text-dimmed mini">
        Fields marked with <span class="required">*</span> are required.
    </p>
    <p class="form-group">
        <input class="btn btn-blue-light" type="submit" value="Send">
    </p>

    <div class="alert alert--success animation-slide-in-from-bottom hide">
        <svg class="alert__icon icon icon-success">
            <use xlink:href="/assets/img/sprite.svg#icon-check"></use>
        </svg>
        <p>
            <strong class="alert__title">Great to hear you’re interested!</strong>
            We’ll get in touch soon.
        </p>
    </div>
    <div class="alert alert--danger hide">
        <svg class="alert__icon icon icon-fail">
            <use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
        </svg>
        <p>
            <strong class="alert__title">Ops, there was an error</strong>
            Would you mind trying again?
        </p>
    </div>

    <input type="text" name="_gotcha" style="display: none;">
    <input type="hidden" name="_subject" value="New services form submission" />
    <input type="hidden" name="_cc" value="{{ site.email.services_cc }}" />

    <div class="form__gdpr">
        <svg class="icon">
            <use xlink:href="/assets/img/sprite.svg#icon-heart-protect"></use>
        </svg>
        <div class="text">
            {{ site.data.gdpr.general | markdownify }}
        </div>
    </div>
</form>