<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">

	<title>{{resume.basics.name}}</title>

  {{!-- Fonts and icons --}}
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

  {{!-- When using with resume-cli, inline CSS --}}
  {{#if css}}
    <style>
      {{{css}}}
    </style>
  {{/if}}

  {{!-- When developing, stylesheet is loaded from another file --}}
  {{#if stylesheet}}
    <link rel="stylesheet" href="{{stylesheet}}"/>
  {{/if}}

	</head>
	<body class="bg-zinc-900 pt-8 px-4 print:px-8 text-white text-sm">
	<div class="max-w-4xl mx-auto px-2">
  <div class="mb-2">
      <div class="flex sm:flex-row print:flex-col sm:justify-between print:justify-between">
        <div class="basis-3/5">
          <h1 class="text-5xl mb-4">{{resume.basics.name}}</h1>
          <h2 class="text-3xl mb-4">{{resume.basics.label}}</h2>
        </div>
        <div class="basis-1/5">
          <img src={{resume.basics.image}} width="135" alt="Italian Trulli">
         </div>
        <div class="basis-1/5 text-white">
          {{> contact}}
        </div>
      </div>
    </div>
    {{#if resume.basics.summary}}
      <div class="mb-2">
        <p>{{resume.basics.summary}}</p>
      </div>
    {{/if}}
    <div class="sm:grid print:grid grid-cols-4 gap-8">
      <div class="sm:order-2 print:order-2 col-span-3 mb-2">
        {{> work }}
        {{> volunteer }}
        {{> education }}
        {{> awards }}
        {{> publications }}
        {{> references }}
      </div>
      <div class="order-1 col-span-1 mb-2">
        {{> skills }}
        {{> languages }}
        {{> interests }}
      </div>
    </div>
	</body>
</html>
