### Install Dependencies

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/README.md

Install project dependencies before starting development.

```bash
npm install
```

--------------------------------

### Setup Test Environment

Source: https://github.com/dfir-iris/iris-web/blob/master/tests/README.md

Creates a virtual environment, activates it, and installs project dependencies.

```bash
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt
```

--------------------------------

### Install Dependencies for Production

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/README.md

Install dependencies using npm ci for a clean and reproducible production environment.

```bash
npm ci
```

--------------------------------

### Install Nginx Ingress Controller

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/kubernetes/README.md

Installs the Nginx Ingress Controller using Helm. Replace `<Name_Space>` with your desired namespace.

```bash
helm repo add ingress-nginx https://kubernetes.github.io/ingress-nginx
helm install my-release ingress-nginx/ingress-nginx -n <Name_Space>
```

--------------------------------

### Start Development Server

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/README.md

Build the IRIS application and automatically rebuild on file changes during development.

```bash
npm run watch
```

--------------------------------

### Check Dependencies

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/kubernetes/README.md

Checks if Helm and kubectl are installed. If any dependencies are missing, their installation commands will be executed automatically.

```bash
make check-dependencies
```

--------------------------------

### Install Iris Web Chart

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/kubernetes/README.md

Installs the Iris Web chart using Helm. Replace `<Name_Space>` with your desired namespace. This command deploys Iris Web in the default configuration.

```bash
$ helm install my-release charts/ --values charts/values.yaml  -n <Name_Space>
```

--------------------------------

### Install Iris Application

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/kubernetes/README.md

Installs or upgrades the Iris application using Helm, applying configurations from charts/values.yaml in the specified namespace.

```bash
make install-iris
```

--------------------------------

### Clone and Run IRIS with Docker

Source: https://github.com/dfir-iris/iris-web/blob/master/README.md

Clone the IRIS repository, checkout the latest tagged version, copy the environment file, pull Docker images, and start the IRIS services using Docker Compose.

```bash
git clone https://github.com/dfir-iris/iris-web.git
cd iris-web

git checkout v2.4.20
cp .env.model .env

docker compose pull

docker compose up
```

--------------------------------

### Flaticon Shopping Bag Icon

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/public/assets/fonts/flaticon/flaticon.html

Example of using the 'flaticon-shopping-bag' class to display an icon.

```html
<i class="flaticon-shopping-bag"></i>
```

--------------------------------

### Get Ingress Resources

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/kubernetes/README.md

Lists all Ingress resources within a specified namespace on the Kubernetes cluster.

```bash
kubectl get ingress -n <Name_Space>
```

--------------------------------

### Flaticon Box Icon (Variant 2)

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/public/assets/fonts/flaticon/flaticon.html

Example of using the 'flaticon-box-2' class to display an icon.

```html
<i class="flaticon-box-2"></i>
```

--------------------------------

### JSON File Format Example for Case Template

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/modal_upload_case_template.html

This JSON structure defines a case template, including its name, display name, description, author, title prefix, summary, tags, tasks, and note directories. Use this format when uploading case templates as JSON files.

```json
{
    "name": "ransomware_infection",
    "display_name": "Ransomware Infection Template",
    "description": "This case template describes first-response tasks to handle information system compromised by a ransomware.",
    "author": "DFIR-IRIS",
    "title_prefix": "RANS",
    "summary": "# Context \n\n\n # Contact \n\n\n # Actions \n\n\n",
    "tags": ["ransomware","malware"],
    "tasks": [
        {
            "title": "Identify the perimeter",
            "description": "The perimeter of compromise must be identified",
            "tags": ["identify"]
        },
        {
            "title": "Collect compromised hosts",
            "description": "Deploy Velociraptor and start collecting evidence",
            "tags": ["collect", "velociraptor"]
        },
        {
            "title": "Contain"
        }
    ],
    "note_directories": [
        {
            "title": "Identify",
            "notes": [
                {
                    "title": "Identify the compromised accounts",
                    "content": "# Observations\n\n"
                }
            ]
        },
        {
            "title": "Collect",
            "notes": [
                {
                    "title": "Velociraptor deployment"
                },
                {
                    "title": "Assets collected",
                    "content": "# Assets collected\n\n# Assets not collected"
                }
            ]
        }
    ]
}
```

--------------------------------

### Flaticon Delivery Truck Icon

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/public/assets/fonts/flaticon/flaticon.html

Example of using the 'flaticon-delivery-truck' class to display an icon.

```html
<i class="flaticon-delivery-truck"></i>
```

--------------------------------

### Flaticon Box Icon (Variant 3)

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/public/assets/fonts/flaticon/flaticon.html

Example of using the 'flaticon-box-3' class to display an icon.

```html
<i class="flaticon-box-3"></i>
```

--------------------------------

### Retrieve Admin Credentials

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/eks_manifest/README.md

Get the administrator username and password by fetching the logs from the Iris-web application pod. Ensure you replace '<pod_name>' with the actual name of your running pod.

```bash
$ kubectl get pod -n iris-web
# Copy the pod name and give it on the below command (pod name looks like "pod/iris-app-deployment-🎲")
$ kubectl logs <pod_name> -n iris-web
# You can see the credential at the end of the logs
```

--------------------------------

### Case Template JSON Example

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/modal_case_template.html

This JSON structure defines a case template for ransomware infections, including fields for name, display name, description, author, classification, title prefix, summary, tags, tasks, and note directories. Tasks and note directories can have nested notes, each with a title and optional content.

```json
{
    "name": "ransomware_infection",
    "display_name": "Ransomware Infection Template",
    "description": "This case template describes first-response tasks to handle information system compromised by a ransomware.",
    "author": "DFIR-IRIS",
    "classification": "malicious-code:ransomware",
    "title_prefix": "\[RANS]\",
    "summary": "# Context \n\n\n# Contact \n\n\n# Actions \n\n\n",
    "tags": ["ransomware","malware"],
    "tasks": [
        {
            "title": "Identify the perimeter",
            "description": "The perimeter of compromise must be identified",
            "tags": ["identify"]
        },
        {
            "title": "Collect compromised hosts",
            "description": "Deploy Velociraptor and start collecting evidence",
            "tags": ["collect", "velociraptor"]
        },
        {
            "title": "Containment"
        }
    ],
    "note_directories": [
        {
            "title": "Identify",
            "notes": [
                {
                    "title": "Identify the compromised accounts",
                    "content": "# Observations\n\n"
                }
            ]
        },
        {
            "title": "Collect",
            "notes": [
                {
                    "title": "Velociraptor deployment"
                },
                {
                    "title": "Assets collected",
                    "content": "# Assets collected\n\n# Assets not collected"
                }
            ]
        }
    ]
}
```

--------------------------------

### Sample Custom Condition 2

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/alerts/templates/alerts.html

Example of a custom condition to filter alerts by severity name.

```json
[
  {
    "field": "severity.severity_name",
    "operator": "like",
    "value": "Critical"
  }
]
```

--------------------------------

### Sample Custom Condition 1

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/alerts/templates/alerts.html

Example of a custom condition to filter alerts by severity ID and title.

```json
[
  {
    "field": "alert_severity_id",
    "operator": "in",
    "value": [1, 2]
  },
  {
    "field": "alert_title",
    "operator": "like",
    "value": "phishing"
  }
]
```

--------------------------------

### Build for Production

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/README.md

Build the IRIS application for production deployment.

```bash
npm run build
```

--------------------------------

### Initialize Popovers and Set Suggest Tags

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/datastore/templates/modal_ds_file.html

Initializes popover elements and sets up the suggest tags functionality for the file tags input.

```javascript
$('[data-toggle="popover"]').popover();
set_suggest_tags('file_tags');
```

--------------------------------

### Deploy Iris-web Application

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/eks_manifest/README.md

Deploy the Iris-web application to EKS by running the 'create' target in the Makefile. Ensure all manifest files have been updated with the correct ECR image URIs and ingress configurations.

```bash
$ make
$ make create
```

--------------------------------

### License Header for New Files

Source: https://github.com/dfir-iris/iris-web/blob/master/CODESTYLE.md

All new files must begin with this license header. Replace `${current_year}` with the current year.

```text
#  IRIS Source Code
#  Copyright (C) ${current_year} - DFIR-IRIS
#  contact@dfir-iris.org
#
#  This program is free software; you can redistribute it and/or
#  modify it under the terms of the GNU Lesser General Public
#  License as published by the Free Software Foundation; either
#  version 3 of the License, or (at your option) any later version.
#
#  This program is distributed in the hope that it will be useful,
#  but WITHOUT ANY WARRANTY; without even the implied warranty of
#  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
#  Lesser General Public License for more details.
#
#  You should have received a copy of the GNU Lesser General Public License
#  along with this program; if not, write to the Free Software Foundation,
#  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
```

--------------------------------

### Activate Virtual Environment

Source: https://github.com/dfir-iris/iris-web/blob/master/tests/README.md

Activates the previously created virtual environment before running tests.

```bash
source ./venv/bin/activate
```

--------------------------------

### JavaScript for User List and SelectPickers

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_task.html

Initializes user lists and select pickers, setting default values for task status.

```javascript
var data = []; if (current_users_list.length === 0) { refresh_users(do_list_users, [{% for assignee in task_assignees %} {{ assignee.id }}, {% endfor %}]); } else { do_list_users(current_users_list, [{% for assignee in task_assignees %} {{ assignee.id }}, {% endfor %}]); } $('form#form_new_task').validate(); set_suggest_tags('task_tags'); $('#task_status_id').selectpicker({ liveSearch: true, title: "Select task status" }); {% if task.task_status_id %} $('#task_status_id').selectpicker('val', '{{task.task_status_id}}'); {% else %} $('#task_status_id').selectpicker('val', 'To do'); {% endif %} $('[data-toggle="popover"]').popover();
```

--------------------------------

### Run All Tests

Source: https://github.com/dfir-iris/iris-web/blob/master/tests/README.md

Executes all unit tests in the project verbosely.

```bash
python -m unittest --verbose
```

--------------------------------

### Initialize User Clients Data Table

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_user.html

Initializes a DataTables instance for displaying user clients, with sorting enabled on the second column (index 1) in ascending order.

```javascript
$('#user_clients_table').dataTable({
    "order": [[ 1, "asc" ]]
});
```

--------------------------------

### Create Alembic Migration

Source: https://github.com/dfir-iris/iris-web/blob/master/CODESTYLE.md

Use this command to create a new Alembic migration script for database changes. Replace '<What's changed>' with a descriptive message.

```bash
alembic -c app/alembic.ini revision -m <What's changed>
```

--------------------------------

### Build Docker Images for Iris-web

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/eks_manifest/README.md

Build the webApp and db Docker images. Skip the nginx image as AWS ALB will be used instead.

```bash
# Build the dockers (Build webApp and db docker images, skip the nginx because we using AWS ALB instead of nginx)
# app & woker:
$ docker build -t webapp:latest -f docker/webApp/Dockerfile .
# DB:
$ docker build -t db:latest -f docker/db/Dockerfile .
```

--------------------------------

### Lint Source Files

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/README.md

Execute linting to check the quality and style of the source code.

```bash
npm run lint
```

--------------------------------

### Suggest Tags for Files

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/datastore/templates/modal_ds_multi_files.html

Initializes the suggest tags functionality for the file tags input. Ensure the 'set_suggest_tags' function is defined elsewhere.

```javascript
set_suggest_tags('file_tags');
```

--------------------------------

### Initialize and Populate User Groups Multiselect

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_manage_user_groups.html

Initializes a multiselect dropdown with user group data and handles pre-selection of existing user groups. Ensure 'current_groups_list' and 'user.user_groups' are defined in the template context.

```html
var data = [];
if (current_groups_list.length === 0) {
    refresh_groups();
}
for (group in current_groups_list) {
    data.push({ label: `${current_groups_list[group].group_name}`, value: current_groups_list[group].group_id });
}
$('#user_groups_membership').multiselect({
    buttonWidth: 400,
    nonSelectedText: 'Select groups',
    includeSelectAllOption: true,
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    filterPlaceholder: 'Search',
    filterBehavior: 'both',
    widthSynchronizationMode: 'ifPopupIsSmaller'
});
$('#user_groups_membership').multiselect('dataprovider', data);
{% if user.user_groups %}
$('#user_groups_membership').multiselect('select', [
{% for group in user.user_groups %}
    {{ group.group_id }},
{% endfor %}
]);
$('#user_groups_membership').multiselect('refresh')
{% endif %}
```

--------------------------------

### Initialize Select Picker

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_graph_asset.html

Initializes a Bootstrap 4 select picker with live search functionality. Use this to enhance dropdown selection for assets.

```javascript
$('#asset').selectpicker({ liveSearch: true, title: "None", style: "Bootstrap 4: 'btn-outline-primary'", });
```

--------------------------------

### Run Specific Test

Source: https://github.com/dfir-iris/iris-web/blob/master/tests/README.md

Executes a single, fully qualified test case.

```bash
python -m unittest tests_rest.TestsRest.test_create_asset_should_not_fail
```

--------------------------------

### Basic HTML Layout with Jinja Templating

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/templates/layouts/default_centered.html

This snippet shows the basic HTML structure for a centered layout using Jinja templating. It includes placeholders for dynamic content like titles, stylesheets, and JavaScript, and conditional logic for demo domains and dark mode.

```html
IRIS - {% block title %}Investigation{% endblock %} | CSIRT   {% if demo_domain %} {% endif %} WebFont.load({ custom: {"families":\["Lato:300,400,700,900", "Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"\], urls: \['/static/assets/css/fonts.css']}, active: function() { sessionStorage.fonts = true; } });      {% block stylesheets %}{% endblock stylesheets %} {% if current_user.in_dark_mode %}  {% endif %}

{% include 'includes/navigation.html' %} {% include 'includes/sidenav.html' %}

{% block content %}{% endblock content %}

{% include 'includes/footer.html' %}

{% include 'includes/quick-sidebar.html' %} {% include 'includes/datastore-sidebar.html' %}

{% block javascripts %}{% endblock javascripts %}
```

--------------------------------

### Initialize Selectpickers and Select2 for Case Form

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_multi_asset.html

Initializes various form elements using Selectpicker and Select2 for improved usability. This includes setting default values and handling pre-filled IOC data.

```javascript
set_suggest_tags('asset_tags');
$('#asset_type_id').selectpicker({ liveSearch: true, title: "None", style: "btn-outline-white" });
$('#analysis_status_id').selectpicker({ liveSearch: true, title: "None", style: "btn-outline-white" });
$('#analysis_status_id').selectpicker('val', '1');
$('#asset_compromise_status_id').selectpicker({ liveSearch: true, title: "To be determined", style: "btn-outline-white" });
$('#asset_compromise_status_id').selectpicker('val', '0');
```

--------------------------------

### Dashboard Chart Initialization

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/dashboard/templates/index.html

Initializes a line chart with HTML legends to display case data. It fetches data via AJAX and configures chart options for responsiveness and tooltips.

```javascript
htmlLegendsChart = document.getElementById('htmlLegendsChart').getContext('2d');
$.ajax({
    url: '/dashboard/case_charts' + case_param(),
    type: "GET",
    dataType: "JSON",
    success: function (data) {
        jsdata = data;
        if (jsdata.status == "success") {
            // Chart with HTML Legends
            var gradientStroke = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
            gradientStroke.addColorStop(0, '#177dff');
            gradientStroke.addColorStop(1, '#80b6f4');
            var gradientFill = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
            gradientFill.addColorStop(0, "rgba(23, 125, 255, 0.7)");
            gradientFill.addColorStop(1, "rgba(128, 182, 244, 0.3)");
            var myHtmlLegendsChart = new Chart(htmlLegendsChart, {
                type: 'line',
                data: {
                    labels: jsdata.data[0],
                    datasets: [
                        {
                            label: "Open case",
                            borderColor: gradientStroke,
                            pointBackgroundColor: gradientStroke,
                            pointRadius: 0,
                            backgroundColor: gradientFill,
                            legendColor: '#fff',
                            fill: true,
                            borderWidth: 1,
                            data: jsdata.data[1]
                        }
                    ]
                },
                options : {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        display: false
                    },
                    tooltips: {
                        bodySpacing: 4,
                        mode:"nearest",
                        intersect: 0,
                        position:"nearest",
                        xPadding:10,
                        yPadding:10,
                        caretPadding:10
                    },
                    layout:{
                        padding:{
                            left:15,
                            right:15,
                            top:15,
                            bottom:15
                        }
                    },
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    display: false
                                },
                                gridLines: {
                                    drawTicks: false,
                                    display: false
                                }
                            }
                        ],
                        xAxes: [
                            {
                                gridLines: {
                                    zeroLineColor: "transparent",
                                    display: false
                                },
                                ticks: {
                                    padding: 20,
                                    fontColor: "rgba(0,0,0,0.5)",
                                    fontStyle: "500",
                                    display: false
                                }
                            }
                        ]
                    },
                    legendCallback: function(chart) {
                        var text = [];
                        text.push('<ul class="' + chart.id + '-legend html-legend">');
                        for (var i = 0; i < chart.data.datasets.length; i++) {
                            text.push('<li><span style="background-color:' + chart.data.datasets[i].legendColor + '"></span>');
                            if (chart.data.datasets[i].label) {
                                text.push(chart.data.datasets[i].label);
                            }
                            text.push('</li>');
                        }
                        text.push('</ul>');
                        return text.join('');
                    }
                }
            });
            //var myLegendContainer = document.getElementById("myChartLegend");
            // generate HTML legend
            //myLegendContainer.innerHTML = myHtmlLegendsChart.generateLegend();
        }
    },
    error: function (error) {
        notify_error(error);
    }
});
```

--------------------------------

### Initialize Select2 for IOC Links

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_asset.html

Initializes the Select2 plugin for the IOC links field, populating it with provided data and pre-selecting existing IOCs if available.

```javascript
var data = [
{% for e in ioc %}
  { id: {{ e.ioc_id }}, text: {{ e.ioc_value| tojson }} },
{% endfor %}
];
$('#ioc_links').select2({ data: data });
{% if ioc_prefill %}
$('#ioc_links').val([ {% for ioc in ioc_prefill %} {{ ioc[0] }}, {% endfor %} ]);
$('#ioc_links').trigger('change');
{% endif %}
```

--------------------------------

### List Helm Releases

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/kubernetes/README.md

Lists all Helm releases currently deployed on the cluster.

```bash
helm list
```

--------------------------------

### Initialize and Populate Access Level Selector

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_cac_to_groups.html

Initializes a multi-select dropdown for selecting access levels and populates it with data from the 'access_levels' variable. Requires the multiselect plugin.

```javascript
$('#group_case_ac_select').multiselect({
    nonSelectedText: 'Select access level',
    includeSelectAllOption: true,
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    filterPlaceholder: 'Search',
    filterBehavior: 'both',
    widthSynchronizationMode: 'ifPopupIsSmaller'
});
$('#group_case_ac_select').multiselect('dataprovider', [{% for acc in access_levels %} { label: "{{ acc.name }}", value: {{ acc.value }} }, {% endfor %}]);
$('#group_case_ac_select').multiselect('refresh');
```

--------------------------------

### Initialize Selectpickers and Popovers

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/modal_case_info_from_case.html

Initializes Bootstrap popovers and selectpicker elements for interactive form controls. Ensures live search and custom styling are applied to dropdowns.

```javascript
$"["data-toggle=\"popover\"]"").popover();
$('#case_quick_classification').selectpicker({
    liveSearch: true,
    title: "Classification",
    style: "btn-outline-white"
});
$('#case_quick_owner').selectpicker({
    liveSearch: true,
    title: "Owner",
    style: "btn-outline-white"
});
$('#case_quick_reviewer').selectpicker({
    liveSearch: true,
    title: "Reviewer",
    style: "btn-outline-white"
});
$('#case_state').selectpicker({
    liveSearch: true,
    title: "Case state",
    style: "btn-outline-white"
});
$('#case_quick_status').selectpicker({
    liveSearch: true,
    title: "Outcome",
    style: "btn-outline-white"
});
$('#case_quick_customer').selectpicker({
    liveSearch: true,
    title: "Customer",
    style: "btn-outline-white"
});
$('#case_quick_severity').selectpicker({
    liveSearch: true,
    title: "Severity",
    style: "btn-outline-white"
});
access_case_info_reload('{{ data.case_id }}', '{{ data.owner_id }}', '{{ data.reviewer_id }}');
```

--------------------------------

### Switch to Develop Branch

Source: https://github.com/dfir-iris/iris-web/blob/master/CODESTYLE.md

Use this command to switch to the 'develop' branch for making safe and small modifications that do not require a review.

```git
git switch develop
```

--------------------------------

### Initialize and Populate Group Selector

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_cac_to_groups.html

Initializes a multi-select dropdown for selecting groups and populates it with data from the 'groups' variable. Requires the multiselect plugin.

```javascript
var data = [];
$('#group_case_access_select').multiselect({
    buttonWidth: 400,
    nonSelectedText: 'Select group(s)',
    emptyText: 'No groups available to set',
    includeSelectAllOption: true,
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    filterPlaceholder: 'Search',
    filterBehavior: 'both',
    widthSynchronizationMode: 'ifPopupIsSmaller'
});
$('#group_case_access_select').multiselect('dataprovider', [{% for ocs in groups %} { label: "{{ ocs.group_name }}", value: {{ ocs.group_id }} }, {% endfor %}]);
$('#group_case_access_select').multiselect('refresh')
```

--------------------------------

### Initialize Popovers

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/datastore/templates/modal_ds_multi_files.html

Initializes popover elements on the page. This should be called after the DOM is ready.

```javascript
$('[data-toggle="popover"]').popover();
```

--------------------------------

### IOC Value Input Placeholder

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_ioc.html

Provides a hint to the user to enter one IOC per line when adding a new IOC.

```html
{% if not ioc.ioc_id %}

 One IOC per line

{% endif %}
```

--------------------------------

### Check for Outdated Packages

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/README.md

Identify packages in your project that have newer versions available.

```bash
npm outdated
```

--------------------------------

### Initialize Selectpickers and Set Defaults

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/dashboard/templates/modal_add_global_task.html

Initializes Bootstrap selectpickers for task assignee and status with live search enabled. It also sets default values for assignee and status if provided.

```javascript
set_suggest_tags('task_tags');
$('#task_assignee_id').selectpicker({
    liveSearch: true,
    title: "None",
    style: "Bootstrap 4: 'btn-outline-primary'",
});
$('#task_status_id').selectpicker({
    liveSearch: true,
    title: "None",
    style: "Bootstrap 4: 'btn-outline-primary'",
});

{% if uid %}
$('#task_assignee_id').selectpicker('val', '{{uid}}');
{% endif %}

{% if task.task_status_id %}
$('#task_status_id').selectpicker('val', '{{task.task_status_id}}');
{% else %}
$('#task_status_id').selectpicker('val', '1');
{% endif %}

$(' [data-toggle="popover"] ').popover();
```

--------------------------------

### Pipeline Selection Dropdown

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_case_pipelines.html

This snippet shows how to render a select picker for choosing a processing pipeline. It is used within the case processing interface.

```html
Processing pipeline {{ form.pipeline(class="selectpicker pl--6 btn-outline-white", id="update_pipeline_selector") }}
```

--------------------------------

### Initialize Access Level Multiselect

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_group_cac.html

Initializes a multiselect dropdown for selecting access levels. Includes options for filtering and selecting all.

```javascript
$('#group_case_ac_select').multiselect({
    nonSelectedText: 'Select access level',
    includeSelectAllOption: true,
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    filterPlaceholder: 'Search',
    filterBehavior: 'both',
    widthSynchronizationMode: 'ifPopupIsSmaller'
});
```

--------------------------------

### Initialize Case Multiselect

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_group_cac.html

Initializes a multiselect dropdown for selecting cases. Includes options for filtering and selecting all.

```javascript
var data = [];
$('#group_case_access_select').multiselect({
    buttonWidth: 400,
    nonSelectedText: 'Select case',
    emptyText: 'No case available to add',
    includeSelectAllOption: true,
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    filterPlaceholder: 'Search',
    filterBehavior: 'both',
    widthSynchronizationMode: 'ifPopupIsSmaller'
});
```

--------------------------------

### Jinja Block for Stylesheets

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/manage_cases.html

Placeholder for page-specific stylesheets.

```html
{% block stylesheets %}    {% endblock stylesheets %}
```

--------------------------------

### Populate and Initialize Select2 for IOC Links

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_multi_asset.html

Dynamically populates a Select2 dropdown with IOC data and handles pre-filled values if provided. This is used for linking related Indicators of Compromise to a case.

```javascript
var data = [
  {% for e in ioc %}
    { id: {{ e.ioc_id }}, text: {{ e.ioc_value| tojson }} },
  {% endfor %}
];
$('#ioc_links').select2({ data: data });
```

```javascript
{% if ioc_prefill %}
$('#ioc_links').val([ {% for ioc in ioc_prefill %} {{ ioc[0] }}, {% endfor %} ]);
$('#ioc_links').trigger('change');
{% endif %}
```

--------------------------------

### Initialize User Permissions Data Table

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_user.html

Initializes a DataTables instance for displaying user permissions, with sorting enabled on the second column (index 1) in ascending order.

```javascript
$('#user_permissions_table').dataTable({
    "order": [[ 1, "asc" ]]
});
```

--------------------------------

### JavaScript Initialization for SelectPickers and Select2

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_event.html

Initializes various UI components including select pickers, popovers, and populates select2 dropdowns for assets and IOCs. It also sets default values for category and pre-fills selections for assets and IOCs if data is provided.

```javascript
set_suggest_tags('event_tags');
$(' [data-toggle="popover"] ').popover();
$('#event_category_id').selectpicker({ width:"100%", liveSearch: true, title: "None", style: "btn-outline-white", });

{% if assets %}
var data = [
 {% for e in assets %}
  { id: {{ e.asset_id }}, text: {{ e.asset_name| tojson }} },
 {% endfor %}
];
$('#event_assets').select2({ data: data });
{% endif %}

{% if iocs %}
var data = [
 {% for e in iocs %}
  { id: {{ e.ioc_id }}, text: {{ e.ioc_value| tojson }} },
 {% endfor %}
];
$('#event_iocs').select2({ data: data });
{% endif %}

{% if category %}
$('#event_category_id').val([ {{ category[0].id }}, ]);
$('#event_category_id').trigger('change');
{% else %}
$('#event_category_id').val(1);
$('#event_category_id').trigger('change');
{% endif %}

{% if assets_prefill %}
$('#event_assets').val([ {% for asset in assets_prefill %} {{ asset }}, {% endfor %} ]);
$('#event_assets').trigger('change');
{% endif %}

{% if iocs_prefill %}
$('#event_iocs').val([ {% for ioc in iocs_prefill %} {{ ioc }}, {% endfor %} ]);
$('#event_iocs').trigger('change');
{% endif %}
```

--------------------------------

### Initialize User Case Access Data Table

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_user.html

Initializes a DataTables instance for user case access with specific column definitions and custom rendering for actions and links. Includes options for filtering, ordering, and selection.

```javascript
var modal_user_cac_table = $("#user_cac_table").DataTable({
    dom: 'Blfrtip',
    aaData: [],
    aoColumns: [
        { "data": "case_id", "render": function ( data, type, row ) {
            return `<i class="fa-solid fa-trash-can mr-2 text-danger" style="cursor:pointer;" title="Remove access to case" href="javascript:void(0)" onclick="remove_case_access_from_user('{{ user.user_id }}',${data})"></i>${data}`;
        }, "className": "dt-center" },
        { "data": "case_name", "className": "dt-center", "render": function (data, type, row) {
            return `<a target="_blank" rel="noopener" href="/case?cid=${row.case_id}">${sanitizeHTML(data)}</a>`;
        } },
        { "data": "access_level_list", "render": function ( data, type, row ) {
            ret_data = "";
            for (acc in data) {
                ret_data += `<span class="badge ml-2 badge-light">${data[acc].name}</span>`
            }
            return ret_data;
        }, "className": "dt-center" }
    ],
    filter: true,
    info: true,
    ordering: true,
    processing: true,
    select: true
});
```

--------------------------------

### Displaying Pipeline Arguments

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_case_pipelines.html

This Jinja2 template code iterates through pipeline arguments and displays them in a user-friendly format. It's used to show available options for the selected pipeline.

```html
{% for itm in pipeline_args %} {% for tm in itm[2] %}

{{tm[0]}} ({{tm[1]}})

{% endfor %} {% endfor %}
```

--------------------------------

### Create and Switch to a New Feature Branch

Source: https://github.com/dfir-iris/iris-web/blob/master/CODESTYLE.md

Create a new feature branch from 'develop' for modifications that imply more work or are risky. Push the new branch and set it as the upstream.

```git
git switch develop
git switch -c <branch-name>
git push --set-upstream origin <branch-name>
```

--------------------------------

### Initialize Permissions Multiselect

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_group.html

Initializes a Bootstrap Multiselect dropdown for selecting group permissions. It populates the dropdown with provided data and pre-selects existing permissions if the group is being edited.

```javascript
var data = [
  {% for e in all_perms %} {
    value: {{ e.value }},
    label: "{{ e.name }}"
  } {% if not loop.last %},{% endif %} {% endfor %}
];
$('#group_permissions').multiselect({
  buttonWidth: 400,
  nonSelectedText: 'Select permissions',
  includeSelectAllOption: true,
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  filterPlaceholder: 'Search',
  filterBehavior: 'both',
  widthSynchronizationMode: 'ifPopupIsSmaller'
});
$('#group_permissions').multiselect('dataprovider', data );
{% if group.group_permissions_list %}
$('#group_permissions').multiselect('select', [
  {% for perm in group.group_permissions_list %}
    {{ perm.value }},
  {% endfor %}
]);
$('#org_members').multiselect('refresh')
{% endif %}
```

--------------------------------

### Use F-strings for String Interpolation

Source: https://github.com/dfir-iris/iris-web/blob/master/CODESTYLE.md

Prefer f-strings for string formatting over the `.format()` method to avoid potential vulnerabilities.

```python
f"Hello, {name}!"
```

--------------------------------

### Clone Iris Web Repository

Source: https://github.com/dfir-iris/iris-web/blob/master/deploy/kubernetes/README.md

Clones the Iris Web repository from GitHub to your local machine.

```bash
$ git clone https://github.com/dfir-iris/iris-web.git
```

--------------------------------

### Audit for Vulnerable Packages

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/README.md

Scan project dependencies for known security vulnerabilities.

```bash
npm audit
```

--------------------------------

### Initialize Case Access DataTable

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_group.html

Initializes a DataTable for managing case access for a group. Allows removing access and displays case details and access levels.

```javascript
var modal_group_cac_table = $("#group_cac_table").DataTable({
  dom: 'Blfrtip',
  aaData: [],
  aoColumns: [
    { "data": "case_id", "render": function ( data, type, row ) {
      return `<i class="fa-solid fa-trash-can mr-2 text-danger" style="cursor:pointer;" title="Remove access to case" href="javascript:void(0)" onclick="remove_case_access_from_group('{{ group.group_id }}',${data})"></i>${data}`;
    }, "className": "dt-center" },
    { "data": "case_name", "className": "dt-center", "render": function (data, type, row) {
      return `<a target="_blank" rel="noopener" href="/case?cid=${row.case_id}">${sanitizeHTML(data)}</a>`;
    } },
    { "data": "access_level_list", "render": function ( data, type, row ) {
      ret_data = "";
      for (acc in data) {
        ret_data += `<span class="badge ml-2 badge-light">${data[acc].name}</span>`
      }
      return ret_data;
    }, "className": "dt-center" }
  ],
  filter: true,
  info: true,
  ordering: true,
  processing: true,
  select: true
});
var actionOptionsGroup = {
  classes: [],
  contextMenu: {
    enabled: true,
    isMulti: true,
    xoffset: -10,
    yoffset: -10,
    headerRenderer: function (rows) {
      if (rows.length > 1) {
        return rows.length + ' items selected';
      } else {
        let row = rows[0];
        return 'Quick action';
      }
    },
  },
  buttonList: {
    enabled: false,
  },
  deselectAfterAction: true,
  items: [],
};
{% if group.group_id %}
actionOptionsGroup.items.push({
  type: 'option',
  title: 'Remove access',
  multi: true,
  iconClass: 'fas fa-trash',
  buttonClasses: ['btn', 'btn-outline-primary'],
  action: function(rows){
    remove_group_cases_from_group_table({{ group.group_id }}, rows);
  }
});
modal_group_cac_table.contextualActions(actionOptionsGroup);
current_group_cases_access_list = {{ group.group_cases_access|tojson }};
modal_group_cac_table.rows.add(current_group_cases_access_list);
modal_group_cac_table.columns.adjust().draw();
{% endif %}
```

--------------------------------

### Initialize Case Access Multiselect

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_user_cac.html

Initializes the multiselect component for selecting cases. Configure options like button width, placeholder texts, and filtering behavior.

```javascript
var data = [];
$('#user_case_access_select').multiselect({
    buttonWidth: 400,
    nonSelectedText: 'Select case',
    emptyText: 'No case available to add',
    includeSelectAllOption: true,
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    filterPlaceholder: 'Search',
    filterBehavior: 'both',
    widthSynchronizationMode: 'ifPopupIsSmaller'
});
```

--------------------------------

### Ace Editor Initialization for Parameter Value

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/modal_update_parameter.html

This JavaScript code initializes an Ace editor for the parameter value input. It sets up the editor's theme, mode (based on parameter type like JSON, HTML, or Markdown), and various display options for enhanced code editing.

```javascript
$(document).ready(function(){
  if ($('#editor_detail').length != 0) {
    var editor = ace.edit("editor_detail", {
      autoScrollEditorIntoView: true,
      minLines: 30,
    });
    editor.setTheme("ace/theme/tomorrow");
    {% if parameter["type"].endswith("json") %} editor.session.setMode("ace/mode/json"); {% elif parameter["type"].endswith("html") %} editor.session.setMode("ace/mode/html"); {% elif parameter["type"].endswith("markdown") %} editor.session.setMode("ace/mode/markdown"); {% endif %}
    editor.renderer.setShowGutter(true);
    editor.setOption("showLineNumbers", true);
    editor.setOption("showPrintMargin", false);
    editor.setOption("displayIndentGuides", true);
    editor.setOption("maxLines", "Infinity");
    editor.session.setUseWrapMode(true);
    editor.setOption("indentedSoftWrap", true);
    editor.renderer.setScrollMargin(8, 5);
  }
});
```

--------------------------------

### Jinja Template Inheritance

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/manage_cases.html

Extends the default layout for the manage cases page.

```html
{% extends "layouts/default.html" %}
```

--------------------------------

### Initialize Group Members DataTable

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_group.html

Initializes a DataTable for displaying group members. Includes functionality to remove members from the group via an icon click.

```javascript
var modal_group_table = $("#group_members_table").DataTable({
  dom: 'Blfrtip',
  aaData: [],
  aoColumns: [
    { "data": "id", "render": function ( data, type, row ) {
      return `<i class="fa-solid fa-trash-can mr-2 text-danger" style="cursor:pointer;" title="Remove from group" href="javascript:void(0)" onclick="remove_members_from_group('{{ group.group_id }}',${data})"></i>${data}`;
    }, "className": "dt-center" },
    { "data": "user", "className": "dt-center", "render": function (data, type, row) {
      return sanitizeHTML(data);
    } },
    { "data": "name", "className": "dt-center", "render": function (data, type, row) {
      return sanitizeHTML(data);
    } }
  ],
  filter: true,
  info: true,
  ordering: true,
  processing: true
});
{% if group.group_id %}
modal_group_table.rows.add({{ group.group_members|tojson }});
modal_group_table.columns.adjust().draw();
{% endif %}
```

--------------------------------

### WebFont Load Configuration

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/manage_make_update.html

Configures the loading of custom web fonts for the application. This is typically used for UI styling.

```javascript
WebFont.load({
  custom: {"families":["Lato:300,400,700,900", "Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands", "simple-line-icons"],
    urls: [
      '/static/assets/css/fonts.css'
    ]
  },
  active: function() {
    sessionStorage.fonts = true;
  }
});
```

--------------------------------

### Initialize Selectpickers and Form Validation

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_asset.html

Initializes selectpicker elements for dropdowns and sets up form validation for the new case form. It also pre-selects values based on existing asset data.

```javascript
$"form#form_new_case\".validate();
set_suggest_tags('asset_tags')
$('#asset_type_id').selectpicker({ liveSearch: true, title: "None", style: "btn-outline-white", });
$('#analysis_status_id').selectpicker({ liveSearch: true, title: "None", style: "btn-outline-white" });
$('#analysis_status_id').selectpicker('val', '1');
$('#asset_compromise_status_id').selectpicker({ liveSearch: true, title: "To be determined", style: "btn-outline-white" });
$('#asset_compromise_status_id').selectpicker('val', '0');
{% if asset.asset_id %}
$('#asset_type_id').selectpicker('val', '{{ asset.asset_type_id }}');
{% endif %}
{% if asset.analysis_status_id %}
$('#analysis_status_id').selectpicker('val', '{{ asset.analysis_status_id }}');
{% endif %}
{% if asset.asset_compromise_status_id %}
$('#asset_compromise_status_id').selectpicker('val', '{{ asset.asset_compromise_status_id }}');
{% endif %}
```

--------------------------------

### Conditional Task Description Display

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_task.html

Conditionally displays the task description if it exists.

```html
{% if task.task_description %}{{ task.task_description }}{% endif %}
```

--------------------------------

### Flaticon Demo Section Styles

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/public/assets/fonts/flaticon/flaticon.html

Styles for the demo section, including list items and code blocks used to showcase icon usage. It defines the appearance of icon numbers and code snippets.

```css
.demo { margin: 2em auto; line-height: 1.25em; }
.demo ul li { margin-bottom: 1em; }
.demo ul li .num { color: #222; border-radius: 20px; display: inline-block; width: 26px; padding: 3px; height: 26px; text-align: center; margin-right: 0.5em; border: 1px solid #222; }
.demo ul li code { background-color: #222; border-radius: 4px; padding: 0.25em 0.5em; display: inline-block; color: #fff; font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace; font-weight: lighter; margin-top: 1em; font-size: 0.8em; word-break: break-all; }
.demo ul li code.big { padding: 1em; font-size: 0.9em; }
.demo ul li code .red { color: #EF3159; }
.demo ul li code .green { color: #ACFF65; }
.demo ul li code .yellow { color: #FFFF99; }
.demo ul li code .blue { color: #99D3FF; }
.demo ul li code .purple { color: #A295FF; }
.demo ul li code .dots { margin-top: 0.5em; display: block; }
```

--------------------------------

### IOC Description Field

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_ioc.html

Renders the description field for an IOC, pre-populating it if an IOC is being edited.

```html
Description

{% if ioc and ioc.ioc_description %}{{ ioc.ioc_description }}{% endif %}
```

--------------------------------

### Initialize User Groups Data Table with Custom Column Rendering

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_user.html

Initializes a DataTables instance for user groups. It includes custom rendering for the first column to add a 'remove from group' icon and sanitizes the group name. Sorting is enabled on the second column (index 1) in ascending order.

```javascript
$('#user_groups_table').dataTable({
    "order": [[ 1, "asc" ]],
    "columns": [
        { "title": "Group name", "render": function ( data, type, row, meta ) {
            if (type === 'display' ) {
                return `<i class="fa-solid fa-trash-can mr-2 text-danger" style="cursor:pointer;" title="Remove from group" href="javascript:void(0)" onclick="remove_member_from_group_wrap('${row[1]}','{{ user.user_id }}')"></i>${sanitizeHTML(data)}`;
            }
            return data;
        }},
        {"title": "Group ID"},
        {"title": "Group UUID"}
    ]
});
```

--------------------------------

### Initialize and Populate Group Members Multiselect

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_group_members.html

This JavaScript code initializes a multiselect dropdown for group members. It populates the dropdown with user data and pre-selects existing group members if available. Ensure 'current_users_list' and 'group.group_members' are properly defined.

```html
var data = [];
if (current_users_list.length === 0) {
    refresh_users();
}
for (user in current_users_list) {
    data.push({
        label: `${current_users_list[user].user_login} (${current_users_list[user].user_name} - ${current_users_list[user].user_email})`,
        value: current_users_list[user].user_id
    });
}
$('#group_members').multiselect({
    buttonWidth: 400,
    nonSelectedText: 'Select members',
    includeSelectAllOption: true,
    enableFiltering: true,
    enableCaseInsensitiveFiltering: true,
    filterPlaceholder: 'Search',
    filterBehavior: 'both',
    widthSynchronizationMode: 'ifPopupIsSmaller'
});
$('#group_members').multiselect('dataprovider', data);
{% if group.group_members %}
$('#group_members').multiselect('select', [
    {% for member in group.group_members %}
    {{ member.id }},
    {% endfor %}
]);
$('#group_members').multiselect('refresh')
{% endif %}
```

--------------------------------

### Status Select Picker

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_task.html

Renders the 'Status' select picker.

```html
{{ form.task_status_id(class="selectpicker col-12") }}
```

--------------------------------

### Jinja Block for Page Title

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/manage_cases.html

Sets the title for the manage cases page.

```html
{% block title %} Manage Cases {% endblock title %}
```

--------------------------------

### Initial State of Case Multiselect Based on Auto-Follow

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_group_cac.html

Sets the initial state of the case multiselect based on whether the 'enable_auto_follow_cases' checkbox is checked on page load.

```javascript
if ($('#enable_auto_follow_cases').is(':checked')) {
    $('#group_case_access_select').multiselect('disable');
}
```

--------------------------------

### Flaticon Wrapper and Header Styles

Source: https://github.com/dfir-iris/iris-web/blob/master/ui/public/assets/fonts/flaticon/flaticon.html

CSS for the main content wrapper and header section of the Flaticon documentation page. Includes styles for layout, branding, and typography.

```css
.wrapper { max-width: 600px; margin: auto; padding: 0 1em; }
.title { font-size: 1.25em; text-align: center; margin-bottom: 1em; text-transform: uppercase; }
header { text-align: center; background-color: #222; color: #fff; padding: 1em; }
header .logo { width: 210px; height: 38px; display: inline-block; vertical-align: middle; margin-right: 1em; border: none; }
header strong { font-size: 1.95em; font-weight: bold; vertical-align: middle; margin-top: 5px; display: inline-block; }
```

--------------------------------

### Task Title Input

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_task.html

Renders the input field for the task title.

```html
{{ form.task_title(class='form-control col-md-12 col-sm-12', autocomplete='off') }}
```

--------------------------------

### Populate Access Level Multiselect

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/manage/templates/access_control/modal_add_user_cac.html

Populates the access level multiselect with available access level options. The data should be formatted as label-value pairs.

```javascript
$('#user_case_ac_select').multiselect('dataprovider', [{% for acc in access_levels %} { label: "{{ acc.name }}", value: {{ acc.value }} }, {% endfor %}]);
$('#user_case_ac_select').multiselect('refresh');
```

--------------------------------

### IOC Tags Inclusion

Source: https://github.com/dfir-iris/iris-web/blob/master/source/app/blueprints/pages/case/templates/modal_add_case_ioc.html

Includes a template for managing IOC tags, likely providing an interface for adding or selecting tags.

```html
{% include 'modals/modal_attributes_tabs.html' %}
```