<%
    globals.heading='TextFilter'
    globals.headline='Apply <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" target="_blank">Javascript Regular Expressions</a> online to arbitrary text.'
%>
<%- include('/templates/header'); %>

<main id="module-textfilter">
    <div class="container">
        <div class="row">
            <div class="col">
                <hr />
            </div>
            <div class="col-md-auto">
                <button type="button" class="btn btn-large btn-secondary pull-right" id="btn-example">Example 
                    <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-easel" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.473.337a.5.5 0 0 0-.946 0L6.954 2h2.092L8.473.337zM12.15 11h-1.058l1.435 4.163a.5.5 0 0 0 .946-.326L12.15 11zM8.5 11h-1v2.5a.5.5 0 0 0 1 0V11zm-3.592 0H3.85l-1.323 3.837a.5.5 0 1 0 .946.326L4.908 11z"/>
                        <path fill-rule="evenodd" d="M14 3H2v7h12V3zM2 2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z"/>
                      </svg>
                </button>
                <button type="button" class="btn btn-large btn-success pull-right" id="btn-run">Run 
                    <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-terminal" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M14 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z"/>
                        <path fill-rule="evenodd" d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9zM3.146 4.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 1 1-.708-.708L4.793 6.5 3.146 4.854a.5.5 0 0 1 0-.708z"/>
                      </svg>
                </button>
            </div>
        </div>

        <div id="alert-message" class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Invalid Regex Rule: </strong> <code class="message-text"></code>
        </div>

        <h3 class="left">Regex <small>expression &gt; modifier &gt; replace</small></h3>
        <textarea class="form-control" rows="10" id="text-regex" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>

        <hr />
        <h3>Input <small>multiline text</small></h3>
        <textarea class="form-control" rows="10" id="text-input" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>


        <h3>Output <small>filtered text</small></h3>
        <textarea class="form-control" rows="10" id="text-output" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
    </div>
</main>

<script type="text/template" id="exampleRegex">
-- Example: First list column to CSV
-- Note - exactly 1 space around the divider " > " is required!

-- Extract the first column
^(\S+)\s+.*$ > gm > $1

-- Replace Linebreaks by , (to CSV)
\n > g > ,
</script>

<script type="text/template" id="exampleInput">
green   0x00ff00
red     0xff0000
blue    0x0000ff
orange  0xcccc00
grey    0xc0c0c0
black   0x000000
</script>

<script src="webtools.min.js"></script>

<%- include('/templates/footer'); %>
