From 4862bf078dd0ed1b77cb9984f08d8d37681df5b0 Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Wed, 6 Feb 2019 20:33:27 -0500
Subject: [PATCH] Initial header row in portfolio nav

---
 styles/components/_portfolio_layout.scss | 35 ++++++++++++++++++
 templates/portfolios/header.html         | 45 +++++++++++++++++++++++-
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss
index fe1e941e..40efda84 100644
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@@ -20,6 +20,41 @@
   }
 }
 
+.portfolio-header {
+  margin: 2 * $gap 0;
+
+  .portfolio-header__name {
+    @include h1;
+  }
+
+  .portfolio-header__budget {
+    font-size: $small-font-size;
+    align-items: center;
+
+    button {
+      margin: 0;
+      padding: 0;
+    }
+
+    .portfolio-header__budget--dollars {
+      font-size: $h2-font-size;
+      font-weight: bold;
+    }
+  }
+
+  .links {
+    font-size: $small-font-size;
+
+    .link--icon {
+      text-align: center;
+    }
+
+    .icon {
+      @include icon-size(20);
+    }
+  }
+}
+
 .portfolio-navigation {
   @include panel-margin;
   margin-bottom: $gap * 4;
diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html
index cc8894de..f5d8d2bf 100644
--- a/templates/portfolios/header.html
+++ b/templates/portfolios/header.html
@@ -1 +1,44 @@
-{{ portfolio.name }}
+{% from "components/icon.html" import Icon %}
+
+{% macro Link(icon, text, url, active=False) %}
+  <a class='icon-link' href='{{ url }}'>
+    <div class='col'>
+      <div class='link--icon'>{{ Icon(icon) }}</div>
+      <div class='link--name'>{{ text }}</div>
+    </div>
+  </a>
+{% endmacro %}
+
+<div class='portfolio-header row'>
+  <div class='col col--grow'>
+    <div class='portfolio-header__name'>
+      {{ portfolio.name }}
+    </div>
+    <div class='portfolio-header__budget row'>
+      <span>Available budget</span>
+      <button type="button" tabindex="0" class="icon-tooltip" v-tooltip.right="{content: 'The available budget shown includes the available budget of all active task orders', container: false}">
+        {{ Icon('info') }}
+      </button>
+      <span class='portfolio-header__budget--dollars'>
+        {{ portfolio.task_orders | sum(attribute='budget') | dollars }}
+      </span>
+    </div>
+  </div>
+  <div class='row links'>
+    {{ Link(
+      icon='chart',
+      text='Reports',
+      url=url_for("portfolios.portfolio_reports", portfolio_id=portfolio.id))
+    }}
+    {{ Link(
+      icon='dollar-sign',
+      text='Funding',
+      url=url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id))
+    }}
+    {{ Link(
+      icon='time',
+      text='Admin',
+      url=url_for("portfolios.portfolio", portfolio_id=portfolio.id))
+    }}
+  </div>
+</div>