extends layout

mixin showArray(title, arr)
  +property(title, !!arr && arr.length > 0 ? arr.join(', ') : 'none')

mixin author(a)
  .field
    p Author:
    if !a.name && !a.email && !a.url
      span not available

    if !!a.name
      span #{a.name} 

    if !!a.email
      span
        a(href='mailto:' + a.email) #{a.email}
        |  

    if !!a.url
      span
        a(href=a.url, target="_blank")=a.url
  
block content
  a.back(href=href) << All components
  h2
    | #{component.name}  
    select#versions
      each version in component.allVersions
        option(value=version, selected=(version === component.version ? "selected" : false))=version
  p.w-100
    | #{component.description}
    if component.oc.state
      span.details-state
        span(class='component-state-' + component.oc.state.toLowerCase())= component.oc.state

  h3 Component Info
  +property('Repository', component.getRepositoryUrl() || 'not available', !!component.getRepositoryUrl())
  +author(parsedAuthor)
  +property('Publish date', new Date(component.oc.date) || 'not available')
  +property('Publish agent', ('OC CLI ' + component.oc.version) || 'not available')
  +showArray('Node.js dependencies', dependencies)
  +showArray('Plugin dependencies', component.oc.plugins)

  h3 Parameters
  if !component.oc.parameters
    p.w-100 none
  else
    #plugins.table
      .row.header
        .t-25 Parameters 
        .t.75
      each p, pName in component.oc.parameters
        .row
          .t-25
            span.bold=pName
            span (#{p.type}, #{p.mandatory ? 'mandatory' : 'optional'})
          .t-75
            if p.description
              span=p.description
              br
              br
            span.bold Example:
            span=p.example

  h3 Code
  p 
    | You can edit the following area and then 
    a.refresh-preview(href="#refresh") refresh 
    | to apply the change into the preview window.
  .field
    p Component's href:
  textarea.search#href(placeholder="Insert component href here") #{href + component.name + '/' + component.version + '/' + sandBoxDefaultQs}
  .field
    p Accept-Language header:
  input.search#lang(value="*")
  h3
    | Preview 
    a.refresh-preview(href="#refresh") (Refresh)
  iframe.preview(src='~preview/' + sandBoxDefaultQs)

block scripts
  script
    | var thisComponentHref = '#{href + component.name}/';
    include:uglify-js static/component-info.js