{% extends 'profile/base.html' %}
{% load qa_tags %}

{% block content %}


<!DOCTYPE html>


    <html class="html__responsive ">

    <head>

        <title>Tags - Stack Overflow</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script async src="https://cdn.sstatic.net/Js/third-party/stacks/stacks.min.js?v=4c00f8ce1b14"></script>
    <script src="https://cdn.sstatic.net/Js/stub.en.js?v=02d19f44eb4e"></script>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=556e4333f24c">
    <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=34c234f84be8">

        <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/secondary.css?v=bbf1061b903d">

    
<meta name="robots" content="noindex">

        
        
        
        <link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/Channels/channels.css?v=47a5e0f03c81">
        

    </head>
    <body class="tags-page unified-theme">
    <div id="notify-container"></div>
    <div id="custom-header"></div>


    <div class="container">



<div id="left-sidebar" data-is-here-when="md lg" class="left-sidebar js-pinned-left-sidebar ps-relative">
    <div class="left-sidebar--sticky-container js-sticky-leftnav">
        <nav role="navigation">
            <ol class="nav-links">
        <li class="">
            <a
               href="/"
               class="pl8 nav-links--link"
               aria-controls="" data-controller="" data-s-popover-placement="right"
               data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
                    <div class="d-flex ai-center">
                        <div class="flex--item truncate">
                            Home
                        </div>
                    </div>
            </a>
        </li>
                <li>
                    <ol class="nav-links">
                            <li class="fs-fine tt-uppercase ml8 mt16 mb4 fc-light">Public</li>

        <li class="">
            <a id="nav-questions"
               href="/questions"
               class="pl8 nav-links--link -link__with-icon"
               aria-controls="" data-controller="" data-s-popover-placement="right"
               data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
<svg aria-hidden="true" class="svg-icon iconGlobe" width="18" height="18" viewBox="0 0 18 18"><path d="M9 1C4.64 1 1 4.64 1 9c0 4.36 3.64 8 8 8 4.36 0 8-3.64 8-8 0-4.36-3.64-8-8-8ZM8 15.32a6.46 6.46 0 01-4.3-2.74 6.46 6.46 0 01-.93-5.01L7 11.68v.8c0 .88.12 1.32 1 1.32v1.52Zm5.72-2c-.2-.66-1-1.32-1.72-1.32h-1v-2c0-.44-.56-1-1-1H6V7h1c.44 0 1-.56 1-1V5h2c.88 0 1.4-.72 1.4-1.6v-.33a6.45 6.45 0 013.83 4.51 6.45 6.45 0 01-1.51 5.73v.01Z"/></svg>                    <span class="-link--channel-name">Questions</span>
            </a>
        </li>



        <li class="youarehere">
            <a id="nav-tags"
               href="/tagsPage"
               class=" nav-links--link" 
               aria-controls="" data-controller="" data-s-popover-placement="right"
               data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
                    <div class="d-flex ai-center">
                        <div class="flex--item truncate">
                            Tags
                        </div>
                    </div>
            </a>
        </li>
        <li class="">
            <a id="nav-users"
               href="/usersPage"
               class="nav-links--link"
               aria-controls="" data-controller="" data-s-popover-placement="right"
               data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
                    <div class="d-flex ai-center">
                        <div class="flex--item truncate">
                            Users
                        </div>
                    </div>
            </a>
        </li>
                    </ol>
                </li>
            </ol>
        </nav>
    </div>


</div>



        <div id="content" class="snippet-hidden">


<div id="mainbar-full">
        <h1 class="fs-headline1 mb16">
            Tags
        </h1>

    <p class="fs-body2 wmx6 mb16">
        A tag is a keyword or label that categorizes your question with other, similar questions. Using the right tags makes it easier for others to find and answer your question.
    </p>


    <div class="d-flex fw-wrap">
        <div class="flex--item ps-relative mb12">
            <input name="w" id="id_search_user"  class="s-input s-input__search h100" autocomplete="off" type="text" maxlength="35" placeholder="Filter by tag name" autofocus>
            <svg aria-hidden="true" class="s-input-icon s-input-icon__search svg-icon iconSearch" width="18" height="18" viewBox="0 0 18 18"><path d="m18 16.5-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5ZM12 7A5 5 0 112 7a5 5 0 0110 0Z"/></svg>
        </div>

        <div class="flex--item ml-auto mb12 d-flex s-btn-group js-filter-btn">
        <a class="youarehere is-selected flex--item s-btn s-btn__muted s-btn__outlined" href="/tags?tab=popular" data-nav-xhref="" title="most popular tags" data-value="popular" data-shortcut="">
            Popular</a>
        <a class="flex--item s-btn s-btn__muted s-btn__outlined" href="/tags?tab=name" data-nav-xhref="" title="tags in alphabetical order" data-value="name" data-shortcut="">
            Name</a>
        <a class="flex--item s-btn s-btn__muted s-btn__outlined" href="/tags?tab=new" data-nav-xhref="" title="recently created tags" data-value="new" data-shortcut="">
            New</a>
</div>

    </div>



    <div id="tags_list">
        <div id="tags-browser" class="d-grid grid__4 lg:grid__3 md:grid__2 sm:grid__1 g12 loopedTags">
        {% for tag in All_tags %}
            <div class="s-card js-tag-cell d-flex fd-column mySearchedTags">
                <div class="d-flex jc-space-between ai-center mb12">
                    <div class="flex--item">
                        <a href="{% url 'tagbadge:taggedItemsFrom_All' tag.id %}" class="post-tag" title="show questions tagged 'p'" rel="tag">{{tag}}</a>
                    </div>
                </div>

                    <div class="flex--item fc-medium mb12 v-truncate4">
                        P is a language for asynchronous event-driven programming written by Microsoft. Questions should include code examples sufficient to reproduce the problem.
                    </div>

                <div class="mt-auto d-flex jc-space-between fs-caption fc-black-400">
                        <div class="flex--item">{{tag|count_questions_by_tag_without_user}} question{{tag|count_questions_by_tag_without_user|pluralize}}</div>
                    <div class="flex--item s-anchors s-anchors__inherit">  </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>



    <script>

            var token = '{{csrf_token}}';
            $('#id_search_user').on('input', function (e) {
                $('#tags_list').html(`<div class="spinner-border text-warning" role="status">
                                        <span class="sr-only">Loading...</span>
                                        </div>`)
                $.ajax({
                    headers: { "X-CSRFToken": token },
                    url: "{% url 'profile:Ajax_searchTag' %}",
                    data: {
                        'w': $('#id_search_user').val(),
                    },
                    method: 'get',
                    dataType: 'json',
                    success: function (response) {
                            $("#tags_list > *").remove();
                        for (result of response.results) { 
                            $('#tags_list').prepend(`<div id="tags-browser" class="d-grid grid__4 lg:grid__3 md:grid__2 sm:grid__1 g12 myS">
${response.results.map(({tag_name}) => `<div class="s-card js-tag-cell d-flex fd-column">
                <div class="d-flex jc-space-between ai-center mb12">
                    <div class="flex--item">
                        <a href="/getQuestions/${result.id}/" class="post-tag" title="" rel="tag">${tag_name}</a>
                    </div>
                </div>

                    <div class="flex--item fc-medium mb12 v-truncate4">
                        For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Please include all relevant tags on your question; e.g., [node.js],…
                    </div>

                <div class="mt-auto d-flex jc-space-between fs-caption fc-black-400">
                        <div class="flex--item">2294252 questions</div>
                    <div class="flex--item s-anchors s-anchors__inherit"> <a href="/questions/tagged/javascript?sort=newest&amp;days=1" title="740 questions tagged javascript in the last 24 hours">740 asked today</a>, <a href="/questions/tagged/javascript?sort=newest&amp;days=7" title="4253 questions tagged javascript in the last 7 days">4253 this week</a> </div>
                </div>
            </div>`).join("")} </div>`)
                            
                        }

                    },
                    error: function(xhr, status, error){
                        //Handle failure here
                        // Want to Test? Stop the server and try to load the post's div.
                    $(`.ajax-failed-to-fetch-error`).html(`<div style="padding: .5em; background-color: red; color:white;">Something Went Wrong while Loading the Div, Try to reload or Check your Internet Connection</div>`)
                    }
                })

            })
</script>



<div class="ajax-failed-to-fetch-error"></div>



</div>
        </div>
    </div>




            <footer id="footer" class="site-footer js-footer" role="contentinfo">
        <div class="site-footer--container">
                <div class="site-footer--logo">
                    <i class="fab fa-stack-overflow fa-3x"></i>
                </div>
            <nav class="site-footer--nav">
                    <div class="site-footer--col site-footer--col__visible js-footer-col" data-name="default">
                        <h5 class="-title"><a href="" class="" >Stack Overflow - Clone</a></h5>
                        <ul class="-list js-primary-footer-links">
                            <li class="-item"><a href="/questions" class=" -link" data-gps-track="footer.click({ location: 4, link: 16})">Questions</a></li>
                                <li class="-item"><a href="" class=" -link" >Jobs</a></li>
                                <li class="-item"><a href="" class=" -link" >Developer Jobs Directory</a></li>
                                     <li class="-item"><a href="" class=" -link" >Salary Calculator</a></li>
                                <li class="-item"><a href="" class=" -link" >Help</a></li>
                                <li class="-item"><a onclick='StackExchange.switchMobile("on")' class=" -link" >Mobile</a></li>
                        </ul>
                    </div>
                    <div class="site-footer--col site-footer--col__visible js-footer-col" data-name="default">
                        <h5 class="-title"><a href="">Products</a></h5>
                        <ul class="-list">
                            <li class="-item"><a href="" class=" -link" 
                                                 
                                                >Teams</a></li>
                            <li class="-item"><a href="" class=" -link" >Talent</a></li>
                            <li class="-item"><a href="" class=" -link" >Advertising</a></li>
                            <li class="-item"><a href="" class=" -link">Enterprise</a></li>
                        </ul>
                    </div>
                <div class="site-footer--col site-footer--col__visible js-footer-col" data-name="default">
                    <h5 class="-title"><a href="">Company</a></h5>
                    <ul class="-list">
                            <li class="-item"><a class=" -link" href="">About</a></li>
                        <li class="-item"><a class=" -link" href="">Press</a></li>
                            <li class="-item"><a class=" -link" href="">Work Here</a></li>
                        <li class="-item"><a class=" -link" href="">Legal</a></li>
                        <li class="-item"><a class=" -link" href="">Privacy Policy</a></li>
                        <li class="-item"><a class="-link" href="">Terms of Service</a></li>
                            <li class="-item"><a class=" -link"  href="">Contact Us</a></li>
                            <li class="-item" id="consent-footer-link"><a class="-link js-cookie-settings" href="#" data-consent-popup-loader="footer">Cookie Settings</a></li>
                        <li class="-item"><a class=" -link"  href="">Cookie Policy</a></li>
                    </ul>
                </div>
            </nav>
            <div class="site-footer--copyright fs-fine">
                <ul class="-list">
                    <li class="-item"><a class="-link" href="">Blog</a></li>
                    <li class="-item"><a href="" class="-link" >Facebook</a></li>
                    <li class="-item"><a href="" class="-link" >Twitter</a></li>
                    <li class="-item"><a href="" class="-link" >LinkedIn</a></li>
                    <li class="-item"><a href="" class="-link">Instagram</a></li>
                </ul>

                <p class="mt-auto mb24">
site design / logo &#169; 2021 Stack Exchange Inc; user contributions licensed under <a href="https://stackoverflow.com/help/licensing">cc by-sa</a>.                    <span id="svnrev">rev&nbsp;2021.11.12.40742</span>
                </p>
            </div>
        </div>

    </footer>
        
    <div id="onetrust-consent-sdk" class="d-none"></div>
    <div id="onetrust-banner-sdk" data-controller="s-modal"></div>
    <div id="ot-pc-content" class="d-none"></div>
    <div id="onetrust-style" class="d-none">&nbsp;</div>
    <div class="d-none js-consent-banner-version" data-consent-banner-version="baseline"></div>

    
    </body>
    </html>



{% endblock content %}