val tree = root(
    div(classes = "main", render = h(
        users()
    )),
    users(),
    p("Test")
)

fun users() = ex {
    users.map {
        p(it.name)
    }
}

fun list() = e {
    ul(render = h(
        li("First"),
        li("Second")
    ))
}

Section(
      key = "s1",
      title = "About",
      children = listOf(
        Text("About contents")
      )
    )

val tree = root(
    div(classes = "main", render = h(
        e {
            if (condition) {
                users()
            } else {
                list()
            }
        }
    )),
    users(),
    p("Test")
)

val tree = root(
    div(classes = "main", render = h(
        ex {
            val render = mutableListOf<VDom>()

            for (user in users) {
                if (user.visible) {
                    render += p(user.name)
                }
            }

            render.toList()
        }
    )),
    users(),
    p("Test")
)

const CandidatesViewComponent = ({candidates}: StateProps) => {
  return (
    <div className="container">
      <div className="row">
        {candidates.map((candidate: OsCandidateWithPerson) =>
          <div className="col-md-4"
               style={styles.candidate}
               key={candidate.id}>
            <Card>
              <CardHeader
                title={`${candidate.firstName} ${candidate.lastName}`}
                subtitle={`Status: ${candidate.status}`}
              />
              <CardText>
                Rating: {candidate.rating}
              </CardText>
              <CardActions>
                <Link to={`/candidates/${candidate.id}/view`}>
                  <FlatButton label="View Details"/>
                </Link>
              </CardActions>
            </Card>
          </div>
        )}
      </div>
    </div>
  );
};

div(className = "container",
    children = [div(
        className = "row",
        children = candidates.map { condidate ->
            div(
                className = "col-md-4",
                children = [card(
                    children = [
                        cardHeader(
                            title = "${candidate.firstName} ${candidate.lastName}",
                            subtitle="Status: ${candidate.status}"
                        )
                        cardText(
                            children = ["Rating: ", candidate.rating]
                        )
                        cardActions(
                            children = link(
                                to = "/candidates/${candidate.id}/view",
                                children = [flatButton(label = "View Details")]
                            )
                        )
                    ]
                )
            )]
        )]
    )

fun candidatesViewComponent() = element {
    div(classes = "container", render = h(
        div(classes = "row", render = elements {
            candidates.map {
                div(classes = "col-md-4", style = "styles.candidate", render = h(
                    cardHeader(
                        title = "${it.firstName} ${it.lastName}",
                        subtitle = "Status: ${it.status}"
                    ),
                    cardText("Rating: ${it.rating}"),
                    cardActions(render = h(
                        link(to = "/candidates/${it.id}/view", render = h(
                            flatButton(label = "View Details")
                        ))
                    ))
                ))
            }
        })
    ))
}

fun candidatesViewComponent() = element {
  div(
      classes = "container", render = h(
      div(
          classes = "row", render = elements {
        candidates.map {
          div(
              classes = "col-md-4", style = "styles.candidate", render = h(
              cardHeader(
                  title = "${it.firstName} ${it.lastName}",
                  subtitle = "Status: ${it.status}"
              ),
              cardText("Rating: ${it.rating}"),
              cardActions(
                  render = h(
                      link(
                          to = "/candidates/${it.id}/view", render = h(
                          flatButton(label = "View Details")
                      )
                      )
                  )
              )
          )
          )
        }
      }
      )
  )
  )
}