{% extends request.ajax ? "layout_blank.phtml" : "layout_default.phtml" %}
{% import "macro_functions.phtml" as mf %}
{% block meta_title %}{% trans 'Contact us' %}{% endblock %}

{% set company = guest.system_company %}

{% block content_before %}
		<!-- Page Heading/Breadcrumbs -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">{% trans 'Contact us' %}</h1>
				<ol class="breadcrumb">
					<li><a href="{{''|link }}">{% trans 'Home' %}</a></li>
					<li class="active">{% trans 'Contact us' %}</li>
				</ol>
            </div>
        </div>
        <!-- /.row -->
{% endblock %}
{% block content %}

		<!-- Content Row -->
        <div class="row">
			<!-- Contact form -->
			<div class="col-md-8">
                <form method="post" action="" class="api_form" data-api-url="guest/support/ticket_create" data-api-tocreated="{{ 'support/contact-us/conversation'|link }}">
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>{% trans 'Name' %}:</label>
                            <input type="text" class="form-control" name="name" value="{% if client %}{{ (profile.first_name ~ " " ~ profile.last_name) }}{% else %}{{request.name}}{% endif %}" required="required">
                        </div>
                    </div>
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>{% trans 'Email address' %}:</label>
                            <input type="email" class="form-control" name="email" value="{% if client %}{{ profile.email }}{% else %}{{request.name}}{% endif %}" required="required">
                        </div>
                    </div>
					<div class="control-group form-group">
                        <div class="controls">
                            <label>{% trans 'Subject' %}:</label>
                            <input type="text" class="form-control" name="subject" value="{{request.subject}}" required="required">
                        </div>
                    </div>
                    <div class="control-group form-group">
                        <div class="controls">
                            <label>{% trans 'Message' %}:</label>
                            <textarea rows="10" cols="100" class="form-control" name="message" maxlength="999" style="resize:none" required="required" data-provide="markdown" data-iconlibrary="fa">{{request.message}}</textarea>
                        </div>
                    </div>
					
					{{ mf.recaptcha }}
					<input type="hidden" name="anti-spam" value="1" id="anti-spam" required="required"/>
					
                    <div id="success"></div>
                    <!-- For success/fail messages -->
					<input class="btn btn-primary" type="submit" value="{% trans 'Send' %}" />
                </form>
            </div>
            <!-- Contact Details Column -->
            <div class="col-md-4">
                <h3>Contact Details</h3>
				<h4>{{ company.name }}</h4>
                <p>
                    {{ company.address_1 }}<br />{{ company.address_2 }}<br />{{ company.address_3 }}<br />
                </p>
                <p><i class="fa fa-phone"></i> 
                    Phone: {{ company.tel }}</p>	
                <p><i class="fa fa-envelope-o"></i> 
                    E-mail: <a href="mailto:{{ company.email }}">{{ company.email }}</a></p>
                <p><i class="fa fa-globe"></i> 
                    Web: <a href="{{ company.www }}">{{ company.www }}</a></p>
            </div>
        </div>
        <!-- /.row -->

{% endblock %}

{% block js %}
<script type="text/javascript">
$(function() {
    $('#anti-spam').remove();

    $('#public-ticket-create').bind('submit',function(event){
        bb.post(
            'guest/support/ticket_create',
            $(this).serialize(),
            function(result) {
                bb.redirect('{{ 'support/contact-us/conversation'|link }}' + '/' + result);
            }
        );
        return false;
    });
});
</script>
{% endblock %}
