mixin svglink
  svg(xmlns="http://www.w3.org/2000/svg")
    path(d="M24 30.2c0 .2.1.5.1.8 0 1.4-.5 2.6-1.5 3.6l-2 2c-1 1-2.2 1.5-3.6 1.5-2.8 0-5.1-2.3-5.1-5.1 0-1.4.5-2.6 1.5-3.6l2-2c1-1 2.2-1.5 3.6-1.5.3 0 .5 0 .8.1l1.5-1.5c-.7-.3-1.5-.4-2.3-.4-1.9 0-3.6.7-4.9 2l-2 2c-1.3 1.3-2 3-2 4.9 0 3.8 3.1 6.9 6.9 6.9 1.9 0 3.6-.7 4.9-2l2-2c1.3-1.3 2-3 2-4.9 0-.8-.1-1.6-.4-2.3L24 30.2z")
    path(d="M33 10.1c-1.9 0-3.6.7-4.9 2l-2 2c-1.3 1.3-2 3-2 4.9 0 .8.1 1.6.4 2.3l1.5-1.5c0-.2-.1-.5-.1-.8 0-1.4.5-2.6 1.5-3.6l2-2c1-1 2.2-1.5 3.6-1.5 2.8 0 5.1 2.3 5.1 5.1 0 1.4-.5 2.6-1.5 3.6l-2 2c-1 1-2.2 1.5-3.6 1.5-.3 0-.5 0-.8-.1l-1.5 1.5c.7.3 1.5.4 2.3.4 1.9 0 3.6-.7 4.9-2l2-2c1.3-1.3 2-3 2-4.9 0-3.8-3.1-6.9-6.9-6.9z")
    path(d="M20 31c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l10-10c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-10 10c-.2.2-.4.3-.7.3z")

mixin svgextlink
  svg(xmlns="http://www.w3.org/2000/svg")
    path(d="M38.288 10.297l1.414 1.415-14.99 14.99-1.414-1.414z")
    path(d="M40 20h-2v-8h-8v-2h10z")
    path(d="M35 38H15c-1.7 0-3-1.3-3-3V15c0-1.7 1.3-3 3-3h11v2H15c-.6 0-1 .4-1 1v20c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V24h2v11c0 1.7-1.3 3-3 3z")

mixin svgcal
  .cal.icon
    svg(xmlns="http://www.w3.org/2000/svg")
      path(d="M37 38H13c-1.7 0-3-1.3-3-3V13c0-1.7 1.1-3 2.5-3H14v2h-1.5c-.2 0-.5.4-.5 1v22c0 .6.4 1 1 1h24c.6 0 1-.4 1-1V13c0-.6-.3-1-.5-1H36v-2h1.5c1.4 0 2.5 1.3 2.5 3v22c0 1.7-1.3 3-3 3z")
      path(d="M17 14c-.6 0-1-.4-1-1V9c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1z")
      path(d="M33 14c-.6 0-1-.4-1-1V9c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1z")
      path(d="M20 10h10v2H20z")
      path(d="M12 16h26v2H12z")
      path(d="M34 20h2v2h-2z")
      path(d="M30 20h2v2h-2z")
      path(d="M26 20h2v2h-2z")
      path(d="M22 20h2v2h-2z")
      path(d="M18 20h2v2h-2z")
      path(d="M34 24h2v2h-2z")
      path(d="M30 24h2v2h-2z")
      path(d="M26 24h2v2h-2z")
      path(d="M22 24h2v2h-2z")
      path(d="M18 24h2v2h-2z")
      path(d="M14 24h2v2h-2z")
      path(d="M34 28h2v2h-2z")
      path(d="M30 28h2v2h-2z")
      path(d="M26 28h2v2h-2z")
      path(d="M22 28h2v2h-2z")
      path(d="M18 28h2v2h-2z")
      path(d="M14 28h2v2h-2z")
      path(d="M30 32h2v2h-2z")
      path(d="M26 32h2v2h-2z")
      path(d="M22 32h2v2h-2z")
      path(d="M18 32h2v2h-2z")
      path(d="M14 32h2v2h-2z")

mixin title(description, classname)
  .main-heading(class=classname)
    h2= description

mixin quote(text)
  .quote
    p= text

mixin text(text)
  .textnode
    p= text

mixin spanner(array)
  for item in array
    each val, key in item
      if (key == 'break')
        br
      else
        span(class=key)= val

mixin section(description, classname)
  .section(class=classname)
    .std-format
      if description
        p.script= description
      block

mixin table(array, display)
  .table
    for subject in array
      ul.tabs
        each val, key in subject
          li.title= key
          each item in val
            if (display == 'tags')
              li.display-tags= item
            else
              li.display-list= item

mixin two-column-single-table(title, object)
  .table
    ul.tabs
      li.title= title
      for val, key in object
        li.display-list
          ul.twins
            li= key
            li= val

mixin row(array)
  .row
    for section in array
      .col(class=section['class'])
        if section['img']
          img(src=section['img'])
        else
          if section['link']
            a(href= 'http://'+section['link'])
              p #{section['content']}
          else
            p= section['content']

mixin multirow(data, params)
  .collection
    for row in data
      .row
        for item in params
          each val,key in item
            .col(class=val)
              p= row[key]

mixin bulletrow(array)
  ul.bullets
    for point in array
      li= point
        .circle
mixin paragraphs(array, content)
  if content
    +title(content)
  .formal
    each paragraph in array
      p= paragraph

mixin link-or-die(url)
  if url
    .jump(data-src=url data-icn="link" class="icon", title="link to project")
      +svgextlink()
  else
    .dead(data-src="img/deadlink.png")

mixin employment(array)
  .employment
    each item in array
      .job
        .header
          .group
            ul.synopsis
              li.logo(style='background-image:url('+item['job']['company']['logo'] +')')
              li.company 
                +spanner([
                         {'large-font':item['job']['company']['name']},
                         {'large-font':item['job']['company']['client'] + ','},
                         {'break':''},
                         {'':item['job']['company']['location']}
                         ])
              li.jobbits
                +spanner([
                         {'':item['job']['company']['jobtitle']},
                         {'':', on '},
                         {'':item['job']['company']['project']}
                         ])
              li.link
                +link-or-die(item['job']['company']['url'])
              li.dates
                +spanner([
                         {'':item['job']['date']['duration']},
                         {'':', from: '},
                         {'':item['job']['date']['start']['date']}
                         ])
                +svgcal()
          .group
            .single-table-1-2
              +table([{'Technologies':item['job']['experience']['stack']}],'tags')
            .single-table-1-2
              +quote(item['job']['experience']['summary'])
            .clear
        .detail(reveal='more')
          .more-btn click to read more..
          .job-description
            +paragraphs(item['job']['experience']['overview'])
            .follow-on
              p.script Consequences, leads and any final thoughts..
              +bulletrow(item['job']['experience']['follow'])

mixin description(array)
  .content
    each item in array
      +multirow([item],[{date:'tiny-cell'},{name:''},{url:'align-right'}])
      +paragraphs(item.description)


mixin alternative(array)
  .content
    each item in array
      +multirow([item],[{date:'tiny-cell'},{description:''}])


mixin biasmeter(title, extremeLeft, extremeRight)
  .bias
    p= title
    .bias--meter
      .bias--slider
        .slice.b--left= extremeLeft
        .slice.b--mid
          .measure--line
          .measure--position(class=title)
            .sphere
        .slice.b--right= extremeRight



+title(about.me.name + ' ' + about.me.surname + ' - ' + about.job.title + ', (' + about.job.experience + ')', 'start')

.bias-container
  +biasmeter('Stack', 'Backend', 'Frontend')
  +biasmeter('Experience', 'Junior', 'Senior')

+section('Contact and Portfolio')
  +quote(about.me.summary)
  .group
    .single-table-1-3
      +two-column-single-table('education',education.degree)
    .single-table-1-3
      +two-column-single-table('portfolio',portfolio)
    .single-table-1-3
      +two-column-single-table('contact',contact)
    .clear
  +table([{'specialist-areas':about.job.specialise}],'tags')

+section('About me, aims and focus..')
  +paragraphs(about.summary)

+section('Skills, Practice and Development Tools')
  +table(skills.technical, 'tags')

+title('Professional Experience')

+section('Employment History','history')
  +employment(employment)

+title('Other Projects, Comissions and Points of Interest')

+section('Website builds')
  +multirow(websites,[{date:'tiny-cell'},{name:''},{url:'align-right'},{stack:'align-right'}])

+section('Affiliated Projects')
  .affiliated
    +description(projects)

+section('End of the line..')
  +alternative(alternative)

+section('Thanks for looking..!')