<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %>
    <%= pb_rails("flex", props: {orientation: "column", horizontal: "center", padding: "md"}) do %>
        <%= pb_rails("flex/flex_item") do %>
            <%= pb_rails("title", props: { text: "Design Expo", tag: "h2", size: 3 }) %>
        <% end %>
        <%= pb_rails("flex/flex_item") do %>
            <%= pb_rails("body", props: {
                text: "Annual Conference*",
                color: "light"
            }) %>
        <% end %>
    <% end %>

    <%= pb_rails("section_separator") %>
    <%= pb_rails("flex", props: {orientation: "column", padding: "md"}) do %>
        <%= pb_rails("flex/flex_item") do %>
            <%= pb_rails("title", props: { text: "Regions", tag: "h4", size: 4, padding_bottom: "sm" }) %>
        <% end %>

        <%= pb_rails("flex", props: {orientation: "column"}) do %>
            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
                <%= pb_rails("checkbox" , props: {
                    text: "North America",
                    value: "checkbox-value",
                    checked: true,
                    name: "checkbox-name",
                    padding_left: "sm",
                    padding_bottom: "sm"
                }) %>
            <% end %>
            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
                <%= pb_rails("checkbox" , props: {
                    text: "Europe",
                    value: "checkbox-value",
                    checked: true,
                    name: "checkbox-name",
                    padding_left: "sm",
                    padding_bottom: "sm"
                }) %>
            <% end %>
        <% end %>
    
    
        <%= pb_rails("title", props: { text: "Total Registered", tag: "h4", size: 4, padding_y: "sm" }) %>

        <%= pb_rails("table", props: { size: "sm", disable_hover: true, padding_bottom: "xs" }) do %>
            <thead>
                <tr>
                <th>Conference</th>
                <th>Total #</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>2020 | SF</td>
                    <td>2,391</td>
                </tr>
                <tr>
                    <td>2020 | TOR</td>
                    <td>3,829</td>
                </tr>
                <tr>
                    <td>2019 | AMS</td>
                    <td>2,047</td>
                </tr>
                <tr>
                    <td>2018 | SF</td>
                    <td>1,824</td>
                </tr>
                <tr>
                    <td>2017 | LA</td>
                    <td>719</td>
                </tr>
                <tr>
                    <td>2017 | LDN</td>
                    <td>491</td>
                </tr>
            </tbody>
        <% end %>
        <%= pb_rails("caption", props: { text: "*This dashboard includes the last six conferences", size: 'xs' }) %>
    <% end %>

  <% end %>



  <%= pb_rails("layout/body", props: { padding: "xl" }) do %>

    <%= pb_rails("title", props: { text: "Registration Dashboard", tag: "h1", size: 3, padding_bottom: "lg" }) %>

  
    <%= pb_rails("flex", props: { classname: "bg_light", spacing: "between", wrap: true }) do %>
        <%= pb_rails("flex/flex_item", props: { fixed_size: "50%" }) do %>
            <%= pb_rails("card") do %>
                <%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_bottom: "md"}) do %>
                    <%= pb_rails("flex/flex_item") do %>
                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "2020 | SF", size: "xs" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "Total Registered" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("title", props: { text: "2,391", tag: "h3", size: 2 }) %>
                            <% end %>
                        <% end %>
                    <% end %>
                    <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
                    <%= pb_rails("flex/flex_item") do %>
                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "Graphic" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("title", props: { text: "353", tag: "h3", size: 3 }) %>
                            <% end %>
                        <% end %>           
                    <% end %>
                    <%= pb_rails("flex/flex_item") do %>
                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "UX/UI" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("title", props: { text: "254", tag: "h3", size: 3 }) %>
                            <% end %>
                        <% end %>
                    <% end %>
                    <%= pb_rails("flex/flex_item") do %>
                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "Product" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("title", props: { text: "194", tag: "h3", size: 3 }) %>
                            <% end %>
                        <% end %>
                    <% end %>
                <% end %>
                <%= pb_rails("section_separator") %>
                <%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_top: "sm"}) do %>
                    <%= pb_rails("flex/flex_item") do %>
                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "2020 | TOR", size: "xs" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "Total Registered" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("title", props: { text: "3,829", tag: "h3", size: 2 }) %>
                            <% end %>
                        <% end %>
                    <% end %>
                    <%= pb_rails("flex/flex_item") do %>
                        <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
                    <% end %>
                    <%= pb_rails("flex/flex_item") do %>
                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "Graphic" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("title", props: { text: "937", tag: "h3", size: 3 }) %>
                            <% end %>
                        <% end %>        
                    <% end %>
                    <%= pb_rails("flex/flex_item") do %>
                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "UX/UI" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("title", props: { text: "721", tag: "h3", size: 3 }) %>
                            <% end %>
                        <% end %>        
                    <% end %>
                    <%= pb_rails("flex/flex_item") do %>
                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("caption", props: { text: "Product" }) %>
                            <% end %>
                            <%= pb_rails("flex/flex_item") do %>
                                <%= pb_rails("title", props: { text: "628", tag: "h3", size: 3 }) %>
                            <% end %>
                        <% end %>   
                    <% end %>
                <% end %>
            <% end %>
            
            <%= pb_rails("flex", props: {orientation: "column", horizontal: "right", padding_bottom: "md"}) do %>
                <%= pb_rails("flex/flex_item") do %>
                    <%= pb_rails("button", props: { text: "View full breakdown", variant: "link" }) %>
                <% end %>
            <% end %>

            <%= pb_rails("card") do %>
                <% data = [{
                    name: '2020 | SF',
                    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
                }, {
                    name: '2020 | TOR',
                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
                }, {
                    name: '2019 | AMS',
                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
                }, {
                    name: '2018 | SF',
                    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
                }, {
                    name: '2017 | LA',
                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
                }] %>

                <%= pb_rails("line_graph", props: { 
                    id: "line-registration", 
                    gradient: false, 
                    chart_data: data, 
                    x_axis_categories:['7 wks away','6 wks away','5 wks away','4 wks away','3 wks away','2 wks away','1 wk away','Start of event'],
                    title: 'Running Total', 
                    axis_title: 'Total Registration',
                    legend: true,
                    height: '80%'
                }) %>
            <% end %>
        <% end %>

        

        <%= pb_rails("flex/flex_item", props: {fixed_size: "40%"}) do %>
            <%= pb_rails("card") do %>
                <% total = [{
                    name: 'Registrations',
                    data: [1475, 524, 1344, 780, 200, 900]
                }] %>
                <%= pb_rails("bar_graph", props: {
                    axis_title: 'Total Registered',
                    chart_data: total,
                    id: "total-attendees",
                    y_axis_min: 0,
                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
                    height: '30%'
                }) %>

                <% new_attendees = [{
                    name: 'Registrations',
                    data: [1475, 524, 1344, 780, 200, 900]
                }] %>
                <%= pb_rails("bar_graph", props: {
                    axis_title: 'New Attendees',
                    chart_data: new_attendees,
                    id: "new-attendees",
                    y_axis_min: 0,
                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
                    height: '30%'
                }) %>

                <% repeating_attendees = [{
                    name: 'Registrations',
                    data: [1475, 524, 1344, 780, 200, 900]
                }] %>
                <%= pb_rails("bar_graph", props: {
                    axis_title: 'Repeating Attendees',
                    chart_data: repeating_attendees,
                    id: "repeating-attendees",
                    y_axis_min: 0,
                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
                    height: '30%'
                }) %>

                <% graphic_designers = [{
                    name: 'Registrations',
                    data: [1475, 524, 1344, 780, 200, 900]
                }] %>
                <%= pb_rails("bar_graph", props: {
                    axis_title: 'Graphic Designers',
                    chart_data: graphic_designers,
                    id: "graphic-designers",
                    y_axis_min: 0,
                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
                    height: '30%'
                }) %>

                <% ux_ui = [{
                    name: 'Registrations',
                    data: [1475, 524, 1344, 780, 200, 900]
                }] %>
                <%= pb_rails("bar_graph", props: {
                    axis_title: 'UX/UI',
                    chart_data: ux_ui,
                    id: "ux-ui",
                    y_axis_min: 0,
                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
                    height: '30%'
                }) %>

                <% product_designers = [{
                    name: 'Registrations',
                    data: [1475, 524, 1344, 780, 200, 900]
                }] %>
                <%= pb_rails("bar_graph", props: {
                    axis_title: 'Product Designers',
                    chart_data: product_designers,
                    id: "product-designers",
                    y_axis_min: 0,
                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
                    height: '30%'
                }) %>
                
            <% end %>
        <% end %>
    <% end %>
  <% end %>
<% end %>