Resource (Detail Page)

<!--A Detail page is a template to be used for a particular type of content. -->
<!--This code creates a Resource Article Detail page that will be used to display each Resource Article. -->
<!--In order to work with the Resources (Lister Page) code block, the Friendly URL of this page should be "resource".-->

<!--This code block creates a News article page including topics.-->
<!--The code detects the presence of Primary Images, and if there is more than one, it'll automatically create a carousel.-->

<!--**IMPORTANT INFORMATION**-->

<!--To use this code you MUST do the following:-->

<!--In the Files Manager, make sure you have the following folder structure (create the folders if you don't): -->
    
<!--    Home > content > www > slick-->
    
<!--    Download the following files and upload them to the "slick" folder:-->
    
<!--    https://www.brickriver.com/files/central_assets/forcodesnippets/slick/ajax-loader.gif-->
<!--    https://www.brickriver.com/files/central_assets/forcodesnippets/slick/slick-carousel.css-->
<!--    https://www.brickriver.com/files/central_assets/forcodesnippets/slick/slick.css-->
<!--    https://www.brickriver.com/files/central_assets/forcodesnippets/slick/slick.min.js-->
    
<!--You also MUST create the "ResourceTypes" Category and add it to the View:-->

<!--- To create the ResourceTypes Category:-->

<!--In the dashboard main menu, click Admin > Categories. Click the green "+New Category Type" button on the right, and name it "Resource Types".-->
<!--Click save. You may now create the topics for your Resources.-->

<!--Save your edits.-->

<!--- To edit the View:-->

<!--In the dashboard main menu, click Admin > Views. You'll see a list of your existing views. -->
<!--If you don't see the "Resources" view, don't worry - we can create it easily.-->
<!--Click the green "+New" button on the right side and select "I'd like to customize an existing view". -->
<!--Find "Resources" on the list and click it.-->

<!--Now that you're inside the View, click the "Document Map" dropdown list, -->
<!--scroll down to find "FieldSet ArticleFields" and click it (do not click the black "x" circle).-->
<!--In the code, you'll see the following new line:-->

<!--<FieldSet Id="ArticleFields"/>-->

<!--Now replace that whole line with the content below:-->

<!--<FieldSet Id="ArticleFields">-->
<!--    <Category Id="ResourceTypes" CatType="Resource Types" Name="Resource Types" Multiple="true" Cmd="Before:Keywords" />-->
<!--</FieldSet>-->

<!--If you've previously made edits to the View, all you need to do is include the <Category> lines inside the "ArticleFields" fieldset.-->

<!--Save the view and you're done.-->

@section head{
    <link href="/files/content/www/slick/slick.css" rel="stylesheet"/>
    <link href="/files/content/www/css/slick-carousel.css" rel="stylesheet"/>
}

@BRT.Detail(tableId: "Content", viewId: "Resources",
fields: new[] {"Title","PubDate","PrimaryImage","Body","ResourceTypes",
"PrimaryContact","Location","Address1","Address2","City","State","Zip","Phone","Email","Files"},
template:
@<article class="detailpage">
    <div>
        <small class="text-muted">
            @if(!item.IsDBNull("PubDate")) {
                <span>@item.GetDateTime("PubDate").ToString("MMMM dd, yyyy")</span>
            } 
            @if((!item.IsDBNull("PubDate")) && (!item.IsDBNull("ResourceTypes")) && item.GetCategory("ResourceTypes").Count > 0) {
                <span> - </span>
            }
            @if (!item.IsDBNull("ResourceTypes") && item.GetCategory("ResourceTypes").Count > 0) {
                <div class="topics">
                    @foreach(CategoryFieldItem topic in item.GetCategory("ResourceTypes")) {
                        <span>@topic.Label</span>
                    }
                </div>
            }
        </small>
    </div>
    @if(!item.IsDBNull("PrimaryImage")) {
        <div class="primaryImg">
            @if(item.GetFiles("PrimaryImage").Count == 1){
                if(item.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                        <figure class="figure figure-fullwidth">
                            <img src="@(item.GetFiles("PrimaryImage")[0].Url)?width=1070&height=300&mode=crop" class="img-fluid" />
                        </figure>
                    }
            } else {
                <div class="in-page-carousel">
                    @foreach(FileFieldItem file in item.GetFiles("PrimaryImage")) {
                        if(file.ContentType.StartsWith("image/")) {
                            <figure class="figure figure-fullwidth">
                                <img src="@(file.Url)?width=1070&height=300&mode=crop" class="img-fluid" />
                                <figcaption class="figure-caption"><em>@file.Title</em>
                                    <p>@file.Description</p>
                                </figcaption>
                            </figure>
                        }
                    }
                </div>
            }
        </div>
    }
    <div>@BRT.Raw(@item.GetString("Body"))</div>
    @if(!item.IsDBNull("PrimaryContact")) {
        <div class="box box-outline">
            <h4>Contact Information</h4>
            <h5>@item["PrimaryContact"]</h5>
            @if(!item.IsDBNull("Location")) {
              <p>@item["Location"]</p>
            }
            @if(!item.IsDBNull("Address1")) {
                <p>
                    <span>@item["Address1"]</span>
                    @if(!item.IsDBNull("Address2")) {
                        <span>, @item["Address2"]</span>
                    }
                </p>
            }
            @if(!item.IsDBNull("City")) {
                <span>@item["City"]</span>
            }
            @if(!item.IsDBNull("State")) {
                foreach(CategoryFieldItem cat in item.GetCategory("State")) {
                    <span>@cat.Label</span>
                }
            }
            @if(!item.IsDBNull("Zip")) {
                <span>@item["Zip"]</span>
            }
            @if(!item.IsDBNull("Phone")) {
                <p>@item["Phone"]</p>
            }
            @if(!item.IsDBNull("Email")) {
                <p><a href="mailto:@item["Email"]">@item["Email"]</a></p>
            }
        </div>
    }
    @if(!item.IsDBNull("Files") && item.GetFiles("Files").Count > 0) {
        <div class="box box-outline">
            <h4>Files</h4>
            @foreach(FileFieldItem file in item.GetFiles("Files")) {
                if(file.ContentType.StartsWith("image/")) {
                    <p><a href="@file.Url" target="_blank">@(String.IsNullOrEmpty(file.Title) ? file.Filename : file.Title) <i class="fas fa-file-image"></i></a></p>
                } else {
                    <p><a href="@file.Url" target="_blank">@(String.IsNullOrEmpty(file.Title) ? file.Filename : file.Title) <i class="fas fa-external-link-square-alt"></i></a></p>
                }
            }
        </div>
    }
</article>)

<script src="/files/content/www/slick/slick.min.js"></script>
<script>
    // initialize carousel
    $('.in-page-carousel').slick({
        slidesToShow: 1
        , autoplay: false
        , dots: false
    });
    $(".slick-prev, .slick-next").text("");
</script>