@extends('layouts/sidebar')

@section('title')
  Vacatures
@endsection

@section('content')
@parent

<div class="vacature_row">
<div class="column_23">
<h3 class="first">Wat doen wij?</h3>
<p>Lijkt het je leuk om voor de streekomroep van en voor het Gooi te werken? Dan ben je op het juiste
adres. NH Gooi is volop in ontwikkeling en biedt kansen voor iedereen die wil meebouwen aan
onze organisatie. En dat allemaal in het mediacentrum van ons land.</p>

<blockquote>
Ik kwam hier als programmeur en nu maak ik met een collega, inmiddels vriend, elke week een
kleinkunstprogramma

<span class="author">—&nbsp;&nbsp;Mischa, programmamaker en technicus</span>
</blockquote>

<p>Wil je programma's maken voor radio en/of televisie, verslaggever worden, podcasts maken? Ben
jij de techneut of ICT-er die zorgt dat alle techniek en verbindingen goed blijven werken? Of vind je
het juist leuk om met een klein team mee te denken en te zorgen dat we nog bekender worden?
Bijna alles is mogelijk en altijd onder begeleiding of samen met anderen.</p>

<p>Wat wij van jou vragen is dat je nieuwsgierig bent, goed kunt samenwerken en graag op zoek gaat
naar de verhalen uit het Gooi. Meer weten?
  <a href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst">Schrijf je nu in voor onze kennismakingsbijeenkomst</a> en laat je inspireren, het verplicht je tot niets.</p>
</div>
<div class="column_13">
<div style="border: solid 1px blue; padding: 3px; margin-bottom: 1em;">
<h3 class="first">Maak kennis met ons!</h3>
  <p>Kom op 27 november kennismaken met NH Gooi!</p>
 
  <a class="read_more" href="/vacatures/ontmoet-ons" title="Kennismakingsbijeenkomst"><span class="arrow"></span><span>Programma &amp; aanmelden</span></a>
  <div class="clearfix"></div>
</div>

<h3 class="first">Wie zoeken wij?</h3>
@foreach($jobs as $job) 
<a class="read_more" href="{{$job->url}}" title="Reageer direct op de vacature {{$job->title}}"><span class="arrow"></span><span>{{$job->title}}</span></a>
@endforeach
<div class="clearfix" style="margin: 1em;"></div>
<h5>Niet wat je zoekt?</h5>
<a class="read_more" href="mailto:meebouwen@nhgooi.nl?subject=Open sollicitatie" title="Mail direct je reactie op deze vacature."><span class="arrow"></span><span>Open sollicitatie</span></a>
        </div>
</div>

<div class="clearfix"></div>
<blockquote>
Je krijgt bij NH Gooi de kans om jezelf te ontwikkelen. Ik mocht al heel snel mijn eigen programma maken
<span class="author">—&nbsp;&nbsp;Yannick, programmamaker</span>
</blockquote>


<h3 class="page_margin_top">Veelgestelde vragen</h3>

<div class="vraag">
<button class="vraag-header">Wat kan NH Gooi mij bieden?</button>
<div class="antwoord">
<ul>
<li>Een baan als vrijwilliger met toekomst. Veel (ex)collega’s zijn in dienst bij landelijke of regionale omroepen.</li>
<li>De kans om mee te bouwen aan onze organisatie en programma’s.</li>
<li>Een enthousiast team met veel kennis</li>
<li>Meer plannen dan we op dit moment kunnen uitvoeren</li>
<li>Een organisatie waar je je talenten kan ontdekken</li>
<li>Workshops en bijeenkomsten met collega’s</li>
</ul>
</div>
</div>

<div class="vraag">
<button class="vraag-header">Aan welke voorwaarden moet ik voldoen?</button>
<div class="antwoord">
Je hebt een band met het Gooi.
Je kunt zelfstandig werken
Je bent nieuwsgierig en ondernemend
Je wilt graag bij een omroep werken
</div>
</div>

<div class="vraag">
<button class="vraag-header">Kan ik me zonder ervaring ook bij NH Gooi aanmelden?</button>
<div class="antwoord">
Ja, de wil om te leren en een flinke dosis enthousiasme is genoeg.
</div>
</div>

<div class="vraag">
<button class="vraag-header">Kan ik ook meerdere dingen doen bij NH Gooi?</button>
<div class="antwoord">
Ja, dat is geen probleem. Bij NH Gooi is (bijna) alles mogelijk. Het belangrijkste is dat je enthousiast bent en je er echt voor in wil zetten. 
</div>
</div>

<div class="vraag">
<button class="vraag-header">Ik vind het leuk om mee richting te geven aan NH Gooi, kan dat ook?</button>
<div class="antwoord">
Absoluut! Voor de verschillende onderdelen zoeken we ook coördinatoren die mede richting willen geven en anderen kan ondersteunen en stimuleren.
</div>
</div>

<blockquote>
Produceren, presenteren, reportages maken, monteren; ik kon het allemaal leren bij NH Gooi. Wil je iets met radio, ben je van 'wel vrijwillig, maar niet vrijblijvend?' Dan wil ik graag mijn ervaringen met je delen
<span class="author">—&nbsp;&nbsp;Michel Stoeltie</span>
</blockquote>

<div class="vraag">
<button class="vraag-header">Ik ben 62 jaar, kan ik me dan ook aanmelden?</button>
<div class="antwoord">
Uiteraard, wij hebben collega’s van 18 tot 72 jaar
</div>
</div>

<div class="vraag">
<button class="vraag-header">Ik heb een parttimebaan, kan ik me aanmelden?</button>
<div class="antwoord">
Ja, als je maar 8 uur per week beschikbaar bent, ‘s avonds of weekend is ook goed.
</div>
</div>

<div class="vraag">
<button class="vraag-header">Als ik meedoe, hoeveel uur per week ben ik dan bezig?</button>
<div class="antwoord">
Of je veel of weinig tijd hebt, dat maakt niet uit. Wel vinden we het belangrijk dat als je je in wilt zetten dat we op je kunnen rekenen.
</div>
</div>

<div class="vraag">
<button class="vraag-header">Wat kan ik verwachten van de begeleiding?</button>
<div class="antwoord">
Je wordt begeleid door een of meer collega’s van NH Gooi. Dit is afhankelijk wat en hoeveel je voor NH Gooi wilt en kunt doen. 
Jouw begeleider 
Is jouw vraagbaak en kent de organisatie en weet wie je kunt benaderen voor specifieke vragen
Zet je op het spoor van dingen en mensen die voor jou interessant zijn
Maar is geen persoonlijk assistent.
</div>
</div>

<style>
  .vacature_row {
    display: flex;
  }

  .column_13 {
    flex: 1 0 33%;
    padding: 4px;
  } 

  .column_23 {
    flex: 1 1 67%;
    padding: 4px;
  }

  @media screen and (max-width: 479px) {
    .vacature_row {
      display: block;
    }
  }

  blockquote {
    font-size: 120%;
    background-color: white;
    margin: 0;
  }

  blockquote .author {
    margin-top: 12px;
  }

  .joblist li, .antwoord li {
    padding-top: 7px;
    padding-bottom: 7px;
    margin-top: 0;
    background-repeat: no-repeat;
    background-position: left 10px;
    padding-left: 25px;
    background-image: url("/images/icons/other/bullet_style_2.png");
  }

  .vraag {
    padding: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
  }

  .vraag a {
    font-size: 150%;
  }

  .vraag a:before {

  }

  .vraag .antwoord {
    display: none;
    font-size: 12px;
    color: black;
  }

 /* Style the buttons that are used to open and close the accordion panel */
.vraag-header {
  background-color: #f0f0f0;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  border-left: 3px solid #1F3977;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .vraag-header:hover {
  background-color: #c0c0c0;
}

/* Style the accordion panel. Note: hidden by default */
.vraag .antwoord {
  padding: 18px 18px;
  font-size: 100%;
  line-height: 150%;
  background-color: white;
  display: none;
  overflow: hidden;
} 

button.vraag-header.active::after {
    content: "\2212";
}
button.vraag-header::after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.page_header {
  display: none;
}
</style>
<script>
   var acc = document.getElementsByClassName("vraag-header");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      $(panel).slideUp();
    } else {
      $(panel).slideDown();
    }
  });
} 
</script>
@endsection