<?php snippet('header') ?>

  <main class="row" role="main">

    <div class="col-10 col-m-10 text">
      <h1><?php echo $page->title()->html() ?></h1>
      <?php echo $page->text()->kirbytext() ?>
    </div>
      
    <div class="col-2 col-m-2 sidebar">
		<img src="<?php echo url('assets/images/vraagofferte.png') ?>" class="offere-img"  alt="Vraag Offerte" />
        <style type="text/css">
   label {display: block;}
   .erroneous, .error {color: red;}
   .success {color: green;}
</style>

<span style="color:#FF0000;font-weight:800">Of heb je een vraag?</span>

<form action="<?php echo $page->url()?>" method="post">

   <p>
	   <label for="message"><span style="color: #ff0000;"><sup>*</sup></span>Jouw vraag:</label>
	   <textarea name="message" id="message"><?php $form->echoValue('message') ?></textarea>
   </p>
   
   <p>
	   <label<?php e($form->hasError('_from'), ' class="erroneous"')?> for="email"><span style="color: #ff0000;"><sup>*</sup></span>Jouw e-mailadres:</label>
	   <input type="email" name="_from" id="email" value="<?php $form->echoValue('_from') ?>" required/>
	</p>
	
	<p style="font-style: italic;font-weight: bold;">Optioneel:</p>
        <p>
			<label for="phonenumber"><span style="color: #ff0000;"><sup>*</sup></span>Telefoonnummer:</label>
            <input name="phonenumber" id="phonenumber" value="<?php $form->echoValue('phonenumber') ?>" required/>
        </p>
        <p><span style="color: #ff0000;"><sup>*</sup></span>Naam:
            <input></input>
        </p>
	
   <label class="uniform__potty" for="website">Please leave this field blank</label>
   <input type="text" name="website" id="website" class="uniform__potty" />

<?php if ($form->hasMessage()): ?>
   <div class="message <?php e($form->successful(), 'success' , 'error')?>">
      <?php $form->echoMessage() ?>
   </div>
<?php endif; ?>

   <button type="submit" name="_submit" value="<?php echo $form->token() ?>"<?php e($form->successful(), ' disabled')?>>Submit</button>

</form>
    </div>

  </main>

<?php snippet('footer') ?>